使用vue-cli建立vue項目及項目結構說明

node及vue的安裝就不講了，網上一大堆，自行查閱

1 建立項目目錄 

    mkdir vueDemo

2 切換到該目錄

    cd vueDemo

3 執行命令建立項目(項目名稱：vue-init-webpack）

    vue init webpack vue-init-webpack

   

Project name:項目名稱，直接回車便可

Project description:項目描述，直接回車便可

Author:做者，直接回車便可

Vue build:構建模式，直接回車便可

Install vue-router?:是否安裝引入vue-router，選Y，vue-router是路由組件,後面構建項目會用到

Use ESLint to lint your code?:強烈建議選no 不然你會很是痛苦，eslint的格式驗證很是嚴格，多一個空格少一個空格都會報錯，因此對於新手來講，通常不建議開啓，會加大開發難度

Setup unit tests 是測試，能夠不用安裝，選n

Setup e2e tests with Nightwatch 是測試，能夠不用安裝，選n

最後一項是選擇用什麼install依賴組件，由於npm比較慢，我通常選第三項，建立完項目後，使用cnpm安裝（cnpm自行在網上查閱安裝）

建立項目完成後，會有後繼命令的提示，接下來繼續操做

4 切換到已建立的項目目錄中

  cd vue-init-webpack

5 執行安裝依賴組件命令（我這裏用的是cnpm）

  cnpm install

  

  

安裝完成

6 啓動服務(開發環境)

  cnpm rum dev

  

服務啓動成功

7 在瀏覽器查看：http://localhost:8080

  

至此，建立基本vue項目成功，接下來講明該項目各目錄及文件的用途

---

 

生成的目錄結構以下

文件夾：

  build -- webpack相關配置文件，通常狀況下不須要本身配置

  config -- vue基本配置文件，可配置端口號，打包輸出等

  node_modules -- 依賴包，也就是運行cnpm install 安裝的依賴組件都在這裏

  src -- 項目核心文件，本身寫的代碼基本都放在這裏面

  static -- 靜態資源，通常圖片類資源都放在這裏

文件：

  .babelrc -- babel編譯參數，不清楚幹啥用的，還沒學到呢，學到後補充知識

  .editorconfig -- 代碼格式

  .gitignore -- git上傳須要忽略的文件配置

  .postcssrc.js -- 轉換css的工具

  index.html -- 主頁

  package.json -- 項目基本信息及項目依賴關係

  README.md -- 項目說明

---

 build目錄

build.js -- 生成環境構建

check-versions.js -- 版本檢查（node,npm)

logo.png -- vue的logo圖片

utils.js -- 構建用相關工具

vue-loader.conf.js -- css加載器配置

webpack.base.conf.js -- webpack基礎配置

webpack.dev.conf.js -- webpack開發環境配置

webpack.prod.conf.js -- webpack生產環境配置

---

 

config目錄

dev.env.js -- 開發環境配置

index.js -- 項目主要配置，監聽端口，打包路徑等

prod.env.js -- 生產環境配置

---

 

node_modules目錄

存放在這個項目的全部依賴，之後項目根據須要安裝的其餘依賴也都放在這裏

---

 

src目錄

assets文件夾 -- 放置靜態資源，css，less，lass等樣式文件，外部js文件等，也能夠放置圖片，文檔等靜態資源

components文件夾 -- 公共組件

router文件夾 -- 路由，配置項目路由

App.vue -- 根組件

main.js -- 入口文件

---

 

未完，待續......