導引
1、為什么要使用vue-cli？
要從快速構建一個項目說起，當下潮流，構建一個項目，一般都會采用前后端分離的web架構。同時對前端搭建環境提出了更高的要求。
平台無關性、功能更齊全
占內存少、更高效
幫助我們寫好Vue基礎代碼的工具，也是行內通用的工具
2、Vue是前端框架
只需要安裝nodejs，不需要掌握其用法。
一、安裝vue-cli
1、Nodejs安裝
參考文檔：https://www.cnblogs.com/matanzhang/p/11441693.html
設置node、npm環境變量
計算機->屬性->高級系統設置->環境變量->系統變量->Path
設置全局模塊緩存目錄
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
加入環境變量。
2、常見的dos命令
使用腳手架會經常用到命令行操作
cd 打開文件夾
md創建新文件夾
dir 查看文件夾內容
cd .. 返回上一級文件夾
3、npm安裝和參數設置
npm（node package manager）是nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）
cnpm：因為npm插件是從國外服務器下載，受網絡影響大，可能出現異常，所以我們樂於分享的淘寶團隊分享了使用國內鏡像來代替國外服務器
全局安裝（global），可以在命令行下（-g）直接使用
可以通過npm root -g查看全局安裝的文件夾未知
手動指定從哪個鏡像服務器獲取資源
npm install -gd --registry=http://registry.npm.taobao.org
為避免每次安裝都需要--registry參數，可以使用如下命令進行永久設置
npm config set registry http://registry.npm.taobao.org
參數說明
-S，--save安裝包信息將加入到Dependencies（生產階段的依賴）
-D，--save--dev 安裝包信息將加入到dev Dependencies（開發階段的依賴），所以開發階段一般使用它
i，是install的縮寫（注意：前面沒有“-”）
cnpm install -g cnpm --registry=http://registry.npm.taobao.org
4、vue-cli安裝
npm install -g vue-cli
cnpm install -g vue-cli
驗證vue版本："d:\Program Files\nodejs\node_global\vue" -V
如果前面沒有設置環境變量的話，這里需要加入環境變量Path路徑。
vue-cli家族成員：cli2、cli3
vue-cli全稱Command-Line Interface：又稱為命令行界面或字符用戶界面。
二、創建vue項目
1、創建cli中部分配置內容說明
? Install vue-router? Yes 官方的路由，大多數情況使用這個
? Use ESLint to lint your code? N 統一代碼風格，自己做開發的話，選擇no。
2、創建vue-cli項目
注意，第一次創建項目很多包需要下載，耗時很久，早做准備。
D:\vuepro\testcli>vue init webpack test1
? Project name test1
? Project description A Vue.js pro
? Author
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch?
創建完成后，啟動項目。
D:\vuepro\testcli>cd test1
D:\vuepro\testcli\test1>npm run dev
瀏覽器訪問驗證：http://localhost:8080/，無異常即ok。
三、初始化路由
1、將首頁顯示為自定義HelloSunny
創建自己的的vue文件，
App.vue刪除圖片等資源顯示
導入組件到index.js中，配置路由
訪問首頁，達到預期效果。
2、將首頁顯示ab頁面及子頁面返回首頁
首頁顯示ab頁面，點擊進去子頁面A\B。
在子頁面，淡季返回首頁。
如此代碼信息，截圖如下。
3、子路由實現
在效果二的基礎上，實現嵌套路由的效果：children:[{},{}]
如上，效果如下，使用children跳轉會顯示父級內容。
注意事項：掛載路由，children使用。
…
component: A,
children:[
{
path: '/a1',
component: A1
}
]
},
{
path: '/b',
…
A1.vue配置
<template>
<div>我是A1A1A1A1A1A1----》
<router-link to="/a">返回上一級</router-link>
<router-link to="/">轉向首頁</router-link>
<router-view></router-view> <!--掛載路由-->
</div>
</template>
如果不使用children，他們就是並列顯示了。
上面三級關系，當轉向AB路徑是，頂級父級沒有顯示，現在要求不管跳轉到哪里，頂級頁面都必須顯示。
如上，找到根級路由配置children就好。
四、概念說明
1、為什么不用#？
頁面訪問默認有#，但是為什么不用#？
地址欄中，經常出現#，是什么作業，能不能去掉
Hash模式：地址欄包含#符合，#以后的不被后台獲取
History模式：具有對url歷史記錄進行修改的功能
在微信、分享url作為參數傳遞時，#不能滿足需求
History需要后台配合，處理404的問題
2、配置結構
在router/index.js里面設置mode。
export default new Router({
mode: 'history',
routes: [
…
五、vue-cli3入門
1、開始vue-cli3操作
開始vue-cli3學習。
D:\vuepro>npm uni vue-cli -g 卸載vue-cli2
removed 237 packages in 156.517s
D:\vuepro>vue -V
'vue' 不是內部或外部命令，也不是可運行的程序或批處理文件。
D:\vuepro>npm i -g @vue/cli 安裝vue-cli3
Vue-cli3有圖像頁面，一般不使用它，以命令行為主。
2、vue-cli3命令行操作跟2類似
D:\vuepro>vue -V
@vue/cli 4.5.15
D:\vuepro>md test2
D:\vuepro>cd test2
D:\vuepro\test2>vue create vue-test2 創建項目
D:\vuepro\test2>cd vue-test2
D:\vuepro\test2\vue-test2>npm run serve 啟動項目
頁面能正常訪問就好。
命令行實現，基礎語法跟vue-cli2一樣的，不需要特殊的設置。
我們直接進去項目把。
六、vue-cli3項目實戰
1、項目需求
項目需求如下，完成下面頁面部署，
2、主要使用技術
如下，主要使用技術
組件及組件間傳值
Axios實現讀取json數據：商品的數據源存於json中
Css相關技術進行布局：布局、間距等樣式
使用views頁面級組件，使用router設置頁面
3、頁面布局分析
大方向：左側——右（上下）側
左側：一個div——>ul li標簽
右側：上面一個標准nav圖片，主要設置圖片尺寸
下面可以分成幾個一樣的div盒子展示
聯動：點擊左側類別，右側下，出現相應的類別展示。
4、后台數據模擬
通過nodes配置實現后端數據獲取。
獲取后端數據配置。
需要安裝axios插件，調用后端數據。這里后端是模擬的。
D:\vuepro\test2\vue-test2>npm i axios
安裝完成后，需要全局注冊，main.js里面配置。
import axios from 'axios'
Vue.prototype.$http=axios //這里變量也可以使用$axios=axios
5、實戰
創建項目，目錄結構如下，
總入口views/ ShouYe.vue如下，
以上為目錄總結構，下面對需要注意的地方具體展示。
數據及其圖片展示public/json/bjb.json，圖片文件如上目錄結構准備即可。
[
{
"goodName":"聯想（Lenovo）拯救者Y7000P",
"img":"img/bjb/bjb1.png"
},
{
"goodName":"聯想（Lenovo）拯救者Y7002P",
"img":"img/bjb/bjb2.png"
}
]
導入axios模塊，
事件總線作為中轉配置，
左側代碼src/componets/Left.vue
<template>
<div>
<div class="title">熱門推薦</div>
<ul class="menu">
<li @click="menu1">筆記本電腦</li>
<li @click="menu2">手機</li>
<li @click="menu3">化妝品</li>
<li @click="menu4">日用百貨</li>
<li>筆記本電腦</li>
<li>手機</li>
<li>化妝品</li>
<li>日用百貨</li>
<li>筆記本電腦</li>
<li>手機</li>
<li>化妝品</li>
<li>日用百貨</li>
</ul>
</div>
</template>
<style type='text/css'>
.title {
color: red;
width: 100px;
}
.menu li {
list-style: none;
height: 50px;
margin-bottom: 2px;
background-color: white;
line-height: 50px;
cursor: pointer; /*鼠標放到該位置，會顯示手型標識...*/
}
</style>
<script type="text/javascript">
import Msg from './msg.js' //通過總線實現組件間 兄弟間傳值
export default {
methods: {
menu1: function(){
Msg.$emit("val", "1") //通過emit去觸發onclick事件，將1賦值給val
},
menu2: function(){
Msg.$emit("val", "2")
},
menu3: function(){
Msg.$emit("val", "3")
},
menu4: function(){
Msg.$emit("val", "4")
}
}
}
</script>
右側下，組件設置src/componets/Right.vue
<template>
<div>
<div v-if="kk==1"><GoodList :goodId="1"></GoodList></div>
<div v-else-if="kk==2"><GoodList :goodId="2"></GoodList></div>
<div v-else-if="kk==3">3333333</div>
<div v-else-if="kk==4">4444444</div>
<div v-else><GoodList :goodId="0"></GoodList>
</div>
</div>
</template>
<script type="text/javascript">
import Msg from './msg.js'
import GoodList from './GoodList'
export default {
data(){ //驗證kk使用，無實際意義
return {
kk: 0
}
},
mounted:function(){ //接收數據
var _this = this //this當前，即這個vue文件本身。_this變量,也可寫成obj
Msg.$on('val',function(m){ //on接收數據，val跟前面的變量對應，把他的值賦值給m
_this.kk = m; //這里不能直接使用this，this只作用於函數內
})
},
components:{
GoodList
}
}
</script>
詳細商品列表，src/componets/GoodList.vue
<template>
<div name="show">
<ul class="goodlist">
<li v-for="goods in list" :key="goods">
<img v-bind:src="goods.img">
<p>{{ goods.goodName }}</p>
</li>
</ul>
</div>
</template>
<style>
.goodlist li{
width: 200px;
height: 200px;
float: left;
list-style: none;
font-size: 9px;
color: red;
margin-bottom: 30px;
}
.goodlist img{
width: 180px;
height: 180px;
}
</style>
<script type="text/javascript">
export default {
name:"show",
data(){
var obj=this;
var url="";
if(obj.goodId==1){
url="json/bjb.json";
}else if(obj.goodId==2){
url="json/shouji.json";
}else{
url="json/bjb.json";
}
this.$http.get(url).then(function(res){
obj.list=res.data;
})
return{
list:[]
}
},
props:{
goodId:Number //goodId，來自於父組件傳值
},
watch:{
goodId(){
var obj=this;
var url="";
if(obj.goodId==1){
url="json/bjb.json";
}else if(obj.goodId==2){
url="json/shouji.json";
}else{
url="json/bjb.json";
}
this.$http.get(url).then(function(res){
obj.list=res.data;
})
return{
list:[]
}
}
}
}
</script>
如上，完成了整個效果展示。