使用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:}
