使用vue-cli搭建項目
一、安裝node
- node -v
- npm -v
二、安裝 vue-cli
- 安裝好了 node，我們可以直接全局安裝 vue-cli： npm install -g vue-cli
- 安裝完成后，可以使用 vue -V （注意 V 大寫）查看是否安裝成功。
如果提示“無法識別 'vue' ” ，有可能是 npm 版本過低，可以使用 npm install -g npm 來更新版本
三、生成項目
1.首先需要在命令行中進(jìn)入到項目目錄，然后輸入：vue init webpack Vue-Project（這里的Vue-Project是你要創(chuàng)建的項目的名稱）。
2.配置完成后，可以看到目錄下多出了一個項目文件夾，里面就是 vue-cli 創(chuàng)建的一個基于 webpack 的 vue.js 項目然后進(jìn)入項目目錄（cd Vue-Project），使用 cnpm 安裝依賴npm install
最后啟動項目：npm run dev（http://localhost:8080/#/），一般都是默認(rèn)的8080端口。
如果瀏覽器打開之后，沒有加載出頁面，有可能是本地的80端口被占用，需要修改一下配置文件 config>index.js，建議將端口號改為不常用的端口。另外我還將 build 的路徑前綴修改為 ' ./ '（原本為 ' / '），是因為打包之后，外部引入 js 和 css 文件時，如果路徑以 ' / ' 開頭，在本地是無法找到對應(yīng)文件的（服務(wù)器上沒問題）。所以如果需要在本地打開打包后的文件，就得修改文件路徑（修改完路徑之后，要將命令行重啟一邊，才能夠?qū)崿F(xiàn)重新編譯）。
- 01.png
四、打包上線
自己的項目文件都需要放到 src 文件夾下
項目開發(fā)完成之后，可以輸入 npm run build 來進(jìn)行打包工作
npm run build
打包完成后，會生成 dist 文件夾，如果已經(jīng)修改了文件路徑，可以直接打開本地文件查看
項目上線時，只需要將 dist 文件夾放到服務(wù)器就行了。
五、梳理一下vue-cli項目的結(jié)構(gòu)
總體框架
文件結(jié)構(gòu)細(xì)分
1.build——[webpack配置]
build文件主要是webpack的配置，主要啟動文件是dev-server.js，當(dāng)我們輸入npm run dev首先啟動的就是dev-server.js，它會去檢查node及npm版本，加載配置文件，啟動服務(wù)。
2.config——[vue項目配置]
config文件主要是項目相關(guān)配置，我們常用的就是當(dāng)端口沖突時配置監(jiān)聽端口，打包輸出路徑及命名等
3.node_modules——[依賴包]
node_modules里面是項目依賴包，其中包括很多基礎(chǔ)依賴，自己也可以根據(jù)需要安裝其他依賴。安裝方法為打開cmd，進(jìn)入項目目錄，輸入npm install [依賴包名稱],回車。
在兩種情況下我們會自己去安裝依賴：
（1）項目運行缺少該依賴包：例如項目加載外部css會用到的css-loader，路由跳轉(zhuǎn)vue-loader等（安裝方法示例：npm install css-loader）
（2）安裝插件：如vux（基于WEUI的移動端組件庫），vue-swiper（輪播插件）
注：有時會安裝指定依賴版本，需在依賴包名稱后加上版本號信息，如安裝11.1.4版本的vue-loader，輸入npm install vue-loader@11.1.4
4.src——[項目核心文件]
項目核心文件前面已經(jīng)進(jìn)行了簡單的說明，接下來重點講解main.js，App.vue,及router的index.js
4.1 index.html——[主頁]
index.html如其他html一樣，但一般只定義一個空的根節(jié)點，在main.js里面定義的實例將掛載在根節(jié)點下，內(nèi)容都通過vue組件來填充
4.2 App.vue——[根組件]
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)
【template】
其中模板只能包含一個父節(jié)點，也就是說頂層的div只能有一個（例如下圖，父節(jié)點為#app的div，其沒有兄弟節(jié)點）
<router-view></router-view>是子路由視圖，后面的路由頁面都顯示在此處
打一個比喻吧,<router-view>類似于一個插槽，跳轉(zhuǎn)某個路由時，該路由下的頁面就插在這個插槽中渲染顯示
【script】
vue通常用es6來寫，用export default導(dǎo)出，其下面可以包含數(shù)據(jù)data，生命周期(mounted等)，方法(methods)等，具體語法請看vue.js文檔，在后面我也會通過例子來說明。
【style】
樣式通過style標(biāo)簽<style></style>包裹，默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加scoped，<style scoped></style>
如要引入外部css文件，首先需給項目安裝css-loader依賴包，打開cmd，進(jìn)入項目目錄，輸入npm install css-loader,回車。安裝完成后，就可以在style標(biāo)簽下import所需的css文件，例如：
<style>
import './assets/css/public.css'
</style>
這樣，我們就可以把style下的樣式封裝起來，寫到css文件夾，再引入到頁面使用，整個vue頁面也看上去更簡潔。
4.3 main.js——[入口文件]
main.js主要是引入vue框架，根組件及路由設(shè)置，并且定義vue實例，下圖中的
components:{App}就是引入的根組件App.vue
后期還可以引入插件，當(dāng)然首先得安裝插件。
4.4 router——[路由配置]
router文件夾下，有一個index.js，即為路由配置文件
這里定義了路徑為'/'的路由，該路由對應(yīng)的頁面是Hello組件，所以當(dāng)我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件
類似的，我們可以設(shè)置多個路由，‘/index','/list'之類的，當(dāng)然首先得引入該組件，再為該組件設(shè)置路由。
細(xì)節(jié)：
- 如果搭建好基本的vue-cli之后，運行出現(xiàn)報錯，可能是已經(jīng)存在的端口號被占用了，修改當(dāng)前項目的端口：config/index.js/dev:{port:}
