Vue-Cli 學(xué)習(xí)整理

堅果

程序猿/藝術(shù)

?關(guān)注他

21 人贊同了該文章

• 1. vue-cli(vue腳手架)全集
  • 1.1. vue-cli2腳手架
    • 1.1.1. nodejs/npm環(huán)境安裝
    • 1.1.2. vue-cli2安裝
    • 1.1.3. 創(chuàng)建vue-cli項目
    • 1.1.4. 自定義首頁
    • 1.1.5. router實現(xiàn)頁面跳轉(zhuǎn)
    • 1.1.6. router實現(xiàn)子路由1
  ?
  • 1.2. router實現(xiàn)子路由2
    • 1.2.1. 為什么不使用#號
    • 1.2.2. 單獨安裝 eslint
    • 1.2.3. 導(dǎo)入其他項目添加依賴并運行
    • 1.2.4. 居中如何實現(xiàn)（主組件的樣式設(shè)置）
    • 1.2.5. 小結(jié)

• • 1.3. vue-cli3
    • 1.3.1. 手動搭建vue-cli環(huán)境
    • 1.3.2. 卸載vue-cli2，并安裝vue-cli3
    • 1.3.3. vue-cli3圖形界面
    • 1.3.4. vue-cli3創(chuàng)建項目
    • 1.3.5. 項目目錄結(jié)構(gòu)
    • 1.3.6. vue-cli3導(dǎo)入其他項目
    • 1.3.7. vue-cli3創(chuàng)建新項目案例
    • 1.3.8. 嵌套路由
    • 1.3.9. vue-cli3添加樣式的三種方式
  ?
  • 1.4. vue-cli3項目案例需求分析
    • 1.4.1. 頁面初始化
    • 1.4.2. 實現(xiàn)左邊固定導(dǎo)航欄，右邊頁面隨不同導(dǎo)航變化
    • 1.4.3. 擴(kuò)展右側(cè)導(dǎo)航欄
    • 1.4.4. axios 處理json數(shù)據(jù)
    • 1.4.5. 多個導(dǎo)航功能實現(xiàn)
    • 1.4.6. 解決刷新以及初始化顯示的問題
    • 1.4.7. vue-cli3小結(jié)

資料來源于慕課網(wǎng)視頻學(xué)習(xí)，較基礎(chǔ)和仔細(xì)，整理為文檔！

1. vue-cli(vue腳手架)全集

1.1. vue-cli2腳手架

1.1.1. nodejs/npm環(huán)境安裝

• 常用dos命令：
  • cd 打開文件夾、md創(chuàng)建新文件夾、dir 查看文件夾內(nèi)容、cd .. 返回上一級文件夾、cls清屏

1.1.2. vue-cli2安裝

• npm(node package manager)是nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）
• cnpm 因為npm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，所以淘寶團(tuán)隊分享了使用國內(nèi)鏡像來代替國外服務(wù)器
• 參數(shù)
  • -g 參數(shù)，全局安裝
  • -S,?--save安裝包信息將加入到dependencie(生產(chǎn)階段的依賴)
  • -D,?--save --dev?安裝包信息將加入到devDependencie(開發(fā)階段的依賴)
  • i, 是 install 的縮寫（前面沒有 -）
  • -gd/-gD/-g -d，綜合上面兩個參數(shù)，將開發(fā)華環(huán)境和生成環(huán)境都加進(jìn)來
  • npm root -g,查看全局安裝的位置
  
  
• npm install -g cnpm --registrys=https://registry.npm.taobao.org
• 為了避免每次安裝都需要 --registry參數(shù)，可以使用如下命令進(jìn)行永久設(shè)置
  • npm config set registry?https://registry.npm.taobao.org

• 安裝 cnpm install -gd vue-cli，使用?vue -V，版本號為2.9.6

1.1.3. 創(chuàng)建vue-cli項目

• 語法：vue init webpack projectName，這里使用的是webpack,projectName是工程名，注意工程名字一般小寫
• 創(chuàng)建過程的配置
  • 是否安裝vue-router，要安裝
  • 是否使用ESLint管理代碼，代碼風(fēng)格管理工具，用來統(tǒng)一代碼，不是項目的話，可以選擇n
  • 其他默認(rèn)
  
  
• 進(jìn)入D盤，md vuecli/ cd vuecli
• 初始化，vue init webpack test1，test1是子文件夾名字，如果初始化失敗，重新安裝
  • 初始化后生成的目錄主要有 build/config/node_modules/src
  • src下包括有 assets/components/router/App.vue/main.js

• 按照系統(tǒng)提示
  • cd test1
  • npm run dev
  
  
• 然后就會進(jìn)入 8080 本地界面

1.1.4. 自定義首頁

• 在components組件文件夾創(chuàng)建 first.vue
• 編寫代碼：

<template><div>first.vue</div> </template>

• 進(jìn)入router文件夾下的 index.js，用來控制頁面路由，添加代碼，
  • 首先引入?import First from '@/components/first'
  • 然后重新執(zhí)行，npm run dev

1.1.5. router實現(xiàn)頁面跳轉(zhuǎn)

• 在首頁，可以通過鏈接進(jìn)入a,b兩個“頁面”，其實是進(jìn)入components中的vue頁面
• 修改 first.vue

<template><div><router-link to="">轉(zhuǎn)向A</router-link><router-link to="">轉(zhuǎn)向B</router-link></div> </template>

新創(chuàng)建兩個components下的vue文件 A.vue/B.vue

<template><div><p>我是A/B頁面</p><p><router-link to="/">返回</router-link></p> //這里直接返回根目錄</div> </template>

在index.js中引入

import A from '@/components/A import B from '@/components/Bexport default new Router({export default new Router({routes: [{path: '/',//name: 'HelloWorld',//component: HelloWorldname: 'First',component: First},{path: '/a', //定義路徑名字component: A},{path: '/b', //定義路徑名字component: B}] }) })

進(jìn)入跳轉(zhuǎn)的頁面 first.vue

在to后面添加路徑名字，"/a"，"/b"

1.1.6. router實現(xiàn)子路由1

• 實現(xiàn)嵌套路由的效果：children:[{},{}]
• 實現(xiàn)多層路由
• 創(chuàng)建A1.vue作為A的子路由

<template><div><p>我是A1頁面</p><p><router-link to="/a">返回上一級<router-link></p><p><router-link to="/">返回首頁</router-link></p></div> </template>

• 首先引入：import A1 from '@/components/A1
• 作為子路由：

export default new Router({export default new Router({routes: [{path: '/',//name: 'HelloWorld',//component: HelloWorldname: 'First',component: First},{path: '/a', //定義路徑名字component: A,children: [{path:'/A1',component: A1}]},{path: '/b', //定義路徑名字component: B}] }) })

• 在A.vue中添加?<p><router-link to:"/A1">轉(zhuǎn)向A1</router-link></p>
• 這時候還不能進(jìn)入到子路由A1頁面，需要將路由掛載進(jìn)來，在A.vue中添加<router-view></router-view>
  • 但這里會將原來A.vue頁面的元素也顯示出來，也就是父子頁面同時顯示，可以應(yīng)用于某些固定的導(dǎo)航欄頁面跳轉(zhuǎn)

1.2. router實現(xiàn)子路由2

• 上一個子路由是父子的關(guān)系，這里要使用平級的功能
• 只要將上一部分的children去掉，并將里面的內(nèi)容提取到平級的部分

{path: '/a', //定義路徑名字component: A, }, {path:'/A1',component: A1 }

1.2.1. 為什么不使用#號

• 路由兩種顯示模式
  • hash模式：地址欄包括#符號，且#后面的不被后臺獲取
  • history模式：具有對url歷史記錄進(jìn)行修改的功能（使用較多）
  
  
• 在微信支付，分享url作為參數(shù)傳遞時，#不能滿足需求
• history需要后臺配合，處理404問題
• 去掉#符號，在index.js文件中修改

export default new Router({mode: 'history', //這里添加 history的模式routes: [{...

1.2.2. 單獨安裝 eslint

• npm i eslint -S/--save （安裝到本地目錄，也就是該工程目錄下）
• 所有安裝好的在package.json文件的dependencies下（或者devDependencies）下都會有相應(yīng)的添加的項
• eslint是規(guī)范檢查，應(yīng)該在開發(fā)環(huán)境中，生產(chǎn)環(huán)境中已經(jīng)不太需要
• 那我們首先卸載 npm uninstall eslint
• 再重新安裝到 dev 下，npm i eslint -D，這樣就安裝到devDependencies，也就是開發(fā)環(huán)境下。
  • 不能使用 npm i eslint --dev，這樣還是安裝到生產(chǎn)環(huán)境，使用 npm i eslint --save-dev
  • 可以使用 -D/--save-dev 安裝到開發(fā)環(huán)境，缺一不可

1.2.3. 導(dǎo)入其他項目添加依賴并運行

• 怎樣導(dǎo)入vue-cli項目
• 進(jìn)入工程文件夾，npm install 安裝相關(guān)依賴，部署配置環(huán)境，前提是vue和npm都安裝
• npm run dev 開始運行

1.2.4. 居中如何實現(xiàn)（主組件的樣式設(shè)置）

• 主頁面的V logo 是怎么設(shè)置的？
• 在 App.vue 的style樣式設(shè)置中

1.2.5. 小結(jié)

• 學(xué)習(xí)了vuecli基本的文檔結(jié)構(gòu)，掌握了頁面跳轉(zhuǎn)的基本方法
• 基本的安裝和卸載

1.3. vue-cli3

1.3.1. 手動搭建vue-cli環(huán)境

• 步驟
• 安裝依賴 npm install/ cnpm install
• 初始化 npm init -f/ cnpm init -f
• 安裝組件，并查看安裝后的內(nèi)容
• 具體流程如下：
• 創(chuàng)建文件夾
• 進(jìn)入文件夾，安裝依賴 npm install
• 初始化 npm init -f，會生成 package.json 的文件
• 安裝router到開發(fā)環(huán)境，npn i vue-router -D/--save-dve，就會新增一個 node_modules 的文件夾
  • 如果是全局安裝，會安裝到nodejs文件夾中的 node_modules文件夾
  
  
• cd no*，進(jìn)入到以 no 開頭的文件夾

1.3.2. 卸載vue-cli2，并安裝vue-cli3

• 重新打開一個控制臺，運行 npm uni/uninstall vue-cli -g
• 如果運行 vue -V 仍能查找到版本號，則使用 cnpm 再卸載一次
• 安裝vue-cli3
• 普通安裝：npm install -g @vue/cli
• 淘寶鏡像：cnpm install -g @vue/cli

1.3.3. vue-cli3圖形界面

• 在控制臺輸入 vue ui，便可以進(jìn)入ui界面

1.3.4. vue-cli3創(chuàng)建項目

首先創(chuàng)建新的文件夾，md test3，然后進(jìn)入 cd test3

創(chuàng)建新的工程 vue create test3

用上下鍵來選擇 default(babel,eslint)或者(Manually select features)

我們選擇后面的一項，然后可以進(jìn)入選擇更多的插件

用上下鍵選擇到某一個項，然后按空格鍵選擇，去掉Linter（這里的eslint規(guī)范，初期先不加進(jìn)去，不然會有很多格式的報錯），選擇后回車

選擇history mode for router為 yes

placing config for Babel,ESLint,etc,選擇 package.json，這里需要按方向鍵調(diào)整

回車到開始安裝

安裝結(jié)束后，系統(tǒng)系統(tǒng)， cd test3, npm run serve

App running at:

Local: http://localhost:8080/

Network:?http://172.31.226.37:8080/

上面是localhost

下面是本機(jī)配置的局域網(wǎng)IP地址

1.3.5. 項目目錄結(jié)構(gòu)

• vue-cli3和vue-cli2有較大區(qū)別
• 主要源程序還是在 src目錄結(jié)構(gòu)下， src下的components主要存放組件，views下主要存放視圖

1.3.6. vue-cli3導(dǎo)入其他項目

• 先進(jìn)入原來的test1工程的文件夾下
• 安裝依賴 npm install
• 啟動 npm run serve，會出現(xiàn)錯誤
• 運行 npm run dev，可以正常運行

1.3.7. vue-cli3創(chuàng)建新項目案例

• 進(jìn)入 test3/test3
• 啟動 npm run serve
• 開始修改項目
• 先在 components文件夾下創(chuàng)建新的組件 first.vue

<template><div><router-link to="">轉(zhuǎn)向A組件/頁面></router-link><router-link to="">轉(zhuǎn)向B組件/頁面></router-link></div> </template>

在router 文件夾下的index.js中導(dǎo)入并使用

import First from '../components/first.vue'const routes = [{path: '/',//name: 'home',component: First},... //省略部分代碼 ]

• 要注意注釋掉原來 Home 的路由
• 在components文件夾下添加要跳轉(zhuǎn)的 A、B組件

<template><div>AAAAAAAAAAAAA<router-link to="/">返回主頁</router-link> //router-link在div標(biāo)簽中</div> </template>

• 按照上面同樣的方法在 index.js 中導(dǎo)入并使用

import A from '../components/A.vue' const routes = [{path: '/a', //要修改這里的 path//name: 'home',component: A},... //省略部分代碼 ]

原來的first.vue中添加跳轉(zhuǎn)的路徑

<template><div><router-link to="/a">轉(zhuǎn)向A組件/頁面></router-link><router-link to="/b">轉(zhuǎn)向B組件/頁面></router-link></div> </template>

1.3.8. 嵌套路由

首先找到要嵌套的頁面，這里是在首頁，修改router下index.js的內(nèi)容

在First首頁路由中添加 children項，然后把 A，B兩個路由項剪切過來

const routes = [{path: '/', //要修改這里的 path//name: 'first',component: First,children: [{path: '/a', //要修改這里的 path//name: 'home',component: A},{path: '/b', //要修改這里的 path//name: 'home',component: B}]},... //省略部分代碼 ]

修改主頁first.vue中的內(nèi)容，凡是作為不跳轉(zhuǎn)的頁面，都需要設(shè)置一個掛載點

添加

<template><div><router-link to="/a">轉(zhuǎn)向A組件/頁面></router-link><router-link to="/b">轉(zhuǎn)向B組件/頁面></router-link><router-view></router-view></div> </template>

1.3.9. vue-cli3添加樣式的三種方式

直接在組件頁面中添加<style>--內(nèi)部樣式表

使用外部樣式表，在public文件夾中創(chuàng)建樣式文件ys1.css

在first.vue文件中導(dǎo)入，替換原來內(nèi)部樣式表的部分，為 @import "路徑名"

1.4. vue-cli3項目案例需求分析

• 主要使用技術(shù)
• 組件及組件間傳值
• axios實現(xiàn)讀取json數(shù)據(jù)：商品的數(shù)據(jù)源存放于json中
• css相關(guān)技術(shù)進(jìn)行布局：布局、間距等樣式
• 使用views頁面級組件，使用router設(shè)置頁面
• 在testcli文件夾下創(chuàng)建新的工程 proj，vue create proj

1.4.1. 頁面初始化

• 將img文件夾放在public文件夾下，需要的圖片素材放在img中
• 項目結(jié)構(gòu)
• components文件夾放一些小組件
• 將小組件組合起來最終是用view文件夾中的頁面去呈現(xiàn)
• 兄弟組件間傳值可以使用?事件總線
• 在assets/components文件夾下創(chuàng)建事件總線
• 創(chuàng)建名為 msg.vue 的事件總線文件，代碼如下：

import Vue from 'vue' export default new Vue // 當(dāng)做是公共的來做參數(shù)傳遞

在要放置各個組件的主頁面First.vue中，導(dǎo)入各個組件，在末尾添加script標(biāo)簽

<script type="text/javascript">import Left from '../components/Left.vue'import Right from '../components/Right.vue'export default {components: {Left,Right}} </script>

然后在 First.vue頁面的適當(dāng)位置使用<Left>/<Right>標(biāo)簽插入相關(guān)的組件

1.4.2. 實現(xiàn)左邊固定導(dǎo)航欄，右邊頁面隨不同導(dǎo)航變化

• 因為左側(cè)有多個導(dǎo)航菜單鍵，右邊只有一個頁面去顯示變化，所以要實現(xiàn)?組件復(fù)用?的功能。
• 首先給左邊導(dǎo)航的li添加事件，<li @click="menu1">服飾</li><li @click="menu2">家電</li>
• 然后在Left.vue文件下面寫上 script 腳本

<script type="text/javascript">import Msg from './msg.vue'export default {methods: {menu1:function() {Msg.$emit("val","1"); //通過 emit 觸發(fā) Msg的on事件，將1的值賦給val，觸發(fā)到on},menu2:function() {Msg.$emit("val","2"); //通過 emit 觸發(fā) Msg的on事件，將1的值賦給val，觸發(fā)到on}}} </script>

• vue文件中如果要添加腳本，script放在最后，其中 export default{} 是必須要寫的，不然沒法顯示出來。
• 在 Right.vue 文件中去接受相應(yīng)的值

<template><div>{{kk}}</div> </template> <script type="text/javascript"> import Msg from './msg.vue' //左右vue文件都要引入這個事件總線的代碼 export default {data() {return {kk: 0}},mouted: function() {var _this = this; //右邊的this代表當(dāng)前vue本身，也就是 kk 的數(shù)據(jù)，左邊是this的副本Msg.$on('val',function(m){this.kk = m; //錯誤，這里this表示的是 on 事件中的內(nèi)容，不再是當(dāng)前vue，所以找不到 kk，所以使用 _this_this.kk = m;}) //使用 on 來接收，val是另一個文件傳過來的值，接受的值傳給 m} } </script>

• 這里有個坑：事件總線這里命令為 Msg.vue，但其實應(yīng)該命名為 Msg.js，所以任何引用到該文件的地方都需要修改為 Msg.js

1.4.3. 擴(kuò)展右側(cè)導(dǎo)航欄

• 原來只有一個頁面的顯示，這里重新修改擴(kuò)展右側(cè)導(dǎo)航欄

<template><div><div v-if="kk==1">1111111111111</div><div v-if="kk==2">2222222222222</div><div v-if="kk==3">3333333333333</div><div v-if="kk==4">4444444444444</div></div> </template> <script type="text/javascript"> ... 同上 </script>

1.4.4. axios 處理json數(shù)據(jù)

• 安裝命令 npm i axios -S，這樣就安裝到生產(chǎn)環(huán)境中去了
• 然后在 main.js 中來引用 import axios from 'axios'
• 并全局注冊該插件，還是在 main.js 文件中， Vue.prototype.$http = axios，這樣以后要使用該插件，就是使用 $http，也可以命名為 $axios
• 然后在 Right.vue 中開始使用。
• 首先準(zhǔn)備 json 數(shù)據(jù)，可以在public文件夾下新建 json 文件夾，新建bjb.json，存放數(shù)據(jù)如下：

[{"goodName": "聯(lián)想1","img": "img/bjb1.jpg"},{"goodName": "聯(lián)想2","img": "img/bjb2.jpg"},{"goodName": "聯(lián)想3","img": "img/bjb3.jpg"}, ]

• 在components文件夾下面創(chuàng)建 goodsList.vue

<template><div name="show"><ul><li v-for="goods in list"><img v-bind:src="goods.img"> //要把json中的數(shù)據(jù)存放到 list 中 <p>{{good.goodName}}</p> //img和goodName是json數(shù)據(jù)中的鍵的名字</li> </ul></div> </template> <script>export default {name: "show",data() {var obj = this;this.$http.get("json/bjb.json").then(function(res){obj.list = res.data; // 這里的 list 是上面 v-for 中的list}) // $http 是上面注冊好的return {list: []}}} </script>

• goodsList.vue需要在Right.vue中使用，所以在 Right.vue 中編寫相關(guān)的代碼
• 首先導(dǎo)入相關(guān)文件?import GoodList from './goodList.vue'
• 然后進(jìn)行組件的注冊，在export default中新增一項?javascript components: [ GoodList ]
• 使用?<GoodList>?替換原來的 11111111111/22222222222等
• 然后在 goodList.vue文件中，添加相應(yīng)的樣式來使得頁面正常顯示

1.4.5. 多個導(dǎo)航功能實現(xiàn)

• 上一次中，Right.vue是父組件，goodsList.vue是子組件，這里先來實現(xiàn)父子組件的傳值
• 在 Right.vue 中添加代碼
• <GoodList :goodId="1"></GoodList>?//在調(diào)用 GoodList 的時候，會傳遞參數(shù) goodId，值為 1
• 在goodsList中接收
• 在export default中添加一項

props: {goodId: Number } watch: { //watch 監(jiān)聽父組件到子組件傳值的參數(shù),goodId值發(fā)生改變，就會被 watch 捕捉到goodId() {var obj = this;var url = "";if( obj.goodId == 1) { // 表示單擊的是第一項url = "json/bjb.json"} else if(obj.goodId == 2) {url = "json/shouji.json" //根據(jù)點擊導(dǎo)航欄菜單的不同，選擇不同的json文件}this.$http.get(url).then(function(res){ //這里的get就是用變量的寫法，url的值傳給 resobj.list = res.data;})return {list: []}} }

• 同時要修改上面 data() 部分的代碼，增加判斷語句然后給 url 賦予不同的 json 數(shù)據(jù)

1.4.6. 解決刷新以及初始化顯示的問題

• 上面需要點擊導(dǎo)航欄的菜單項才會顯示出來，這里給它添加一個默認(rèn)顯示的項
• 只需要在上面的 data 和 watch 函數(shù)中添加一個 else

watch: { //watch 監(jiān)聽父組件到子組件傳值的參數(shù),goodId值發(fā)生改變，就會被 watch 捕捉到goodId() {var obj = this;var url = "";if( obj.goodId == 1) { // 表示單擊的是第一項url = "json/bjb.json"} else if(obj.goodId == 2) {url = "json/shouji.json" //根據(jù)點擊導(dǎo)航欄菜單的不同，選擇不同的json文件} else { // 上面 goodId==0 就通過這里處理url = "json/bji.json" //這里可以顯示默認(rèn)的頁面 }this.$http.get(url).then(function(res){ //這里的get就是用變量的寫法，url的值傳給 resobj.list = res.data;})return {list: []}} }

• 然后修改 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">3333333333333</div><div v-else-if="kk==4">4444444444444</div><div v-else> //除了以上之外，才是下面0的顯示<GoodList :goodId="0"></GoodList></div></div> </template> <script type="text/javascript"> ... 同上 </script>

1.4.7. vue-cli3小結(jié)

• vue-cli2/vue-cli3安裝，卸載，相關(guān)插件的安裝，卸載。
• 實現(xiàn)頁面路由、路由嵌套、插件安裝

?

總結(jié)

以上是生活随笔為你收集整理的Vue-Cli 学习整理【转载】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。