1. 程式人生 > >webstorm+vue初始化專案

webstorm+vue初始化專案

vue新專案準備:
1、安裝nodejs,官網下載傻瓜安裝

   node -v 驗證

2、npm包管理器,是整合在node中的,所以安裝了node也就有了npm

   npm -v 驗證

3、安裝cnpm
   npm install -g cnpm --registry=http://registry.npm.taobao.org

   (完成之後,我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步瞭解cnpm的,檢視淘寶npm映象官網。)

4、安裝vue-cli腳手架構建工具
    npm install -g vue-cli  或者  npm install -g @vue/cli
   
   
vue新專案構建:
1、初始化專案模板:
vue init webpack-simple yunshi-approve 
    或者  vue init webpack yunshi-approve


2、安裝npm
cd yunshi-approve

3、安裝專案所需要的依賴:
npm install 或 cnpm install

4、執行看效果:
    npm run dev


<--------------------------------------------------------------------------->
   介紹一下目錄及其作用:


     build:最終釋出的程式碼的存放位置。


     config:配置路徑、埠號等一些資訊,我們剛開始學習的時候選擇預設配置。


     node_modules:npm 載入的專案依賴模組。


     src:這裡是我們開發的主要目錄,基本上要做的事情都在這個目錄裡面,裡面包含了幾個目錄及檔案:


             assets:放置一些圖片,如logo等


             components:目錄裡放的是一個元件檔案,可以不用。


             App.vue:專案入口檔案,我們也可以將元件寫這裡,而不使用components目錄。


            main.js :專案的核心檔案


     static:靜態資源目錄,如圖片、字型等。


     test:初始測試目錄,可刪除


      .XXXX檔案:配置檔案。


     index.html:首頁入口檔案,可以新增一些meta資訊或者同統計程式碼啥的。


     package.json:專案配置檔案。


     README.md:專案的說明檔案。
<--------------------------------------------------------------------------->