vue-cli搭建vue項目（單頁面應用）

1.全局安裝vue-cli

2.建立項目：

vue init webpack test

test是項目名稱，會在當前工做目錄下新建一個test文件夾

接下來會手動選擇一些配置

除了Setup unit tests with Karma + Moch?和Setup e2e tests with Nightwatch兩個測試選項選擇no，其餘都選擇默認便可

3.執行init完畢後，會自動生成項目，安裝vue項目必要和常見的loader，插件等

4.項目目錄結構：

• build 文件夾：用於存放 webpack 相關配置和腳本（默認狀況下，webpack使用根目錄下的webpack.config.js，可是其實能夠使用任何目錄下的任意名字的js配置文件，取決於package.json），package.json有這樣的配置：

　　"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

　　"build": "node build/build.js"----build.js引用了webpack.prod.conf.js

　　webpack.prod.conf.js和webpack.dev.conf.js都引用了webpack.base.conf.js，在webpack.base.conf.js配置的在prod和dev

　　中都有效

 

• config文件夾:用於配置一些webpack須要用到的參數，好比webpack配置文件夾中的輸出目錄：

　

　　output: {

　　　　path: config.build.assetsRoot,

　　      ......

　　}

　　assetsRoot在config下配置文件能夠找到對應的值：

      assetsRoot: path.resolve(__dirname, '../dist'),

      輸出目錄配置在config上一層（工程根目錄）下的dist文件夾下

 

• src文件夾

　　這個文件夾是整個項目最主要以及使用頻率最高的文件夾。

　　「assets」: 共用的樣式、圖片

　　「components」: 業務代碼存放的地方，裏面分紅一個個組件存放，一個頁面是一個組件，一個頁面裏面還會包着不少組件

　　「router」: 設置路由

　　「App.vue」: vue文件入口界面

　　「main.js：對應App.vue 建立vue實例，也是入口文件，對應webpack.base.config.js裏的入口配置

也能夠在裏面增長新建目錄和文件

•  static目錄：

　　靜態資源目錄，放在這個目錄下的文件不通過loader直接能夠使用，好比在static下新建img目錄存放圖片

      使用的時候（沒進過loader，當前路徑是項目根目錄）：

　　<img src="/static/img/logo2.png">

      src/assets下面也能夠存放圖片，使用loader加載，引用的時候以當前vue文件爲基準目錄，好比在app.vue中：

　　<img src="./assets/bg_student.png">

     若是這兩個圖片文件都加載了，會在dist/static/img下放入這兩張圖片（assets下的圖片大於limit限制纔會放入，不然　　

     base64寫入文件）