Vue-Cli 學習整理

堅果

程序猿/藝術

?關注他

21 人贊同了該文章

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

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

資料來源于慕課網視頻學習，較基礎和仔細，整理為文檔！

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

1.1. vue-cli2腳手架

1.1.1. nodejs/npm環境安裝

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

1.1.2. vue-cli2安裝

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

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

1.1.3. 創建vue-cli項目

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

• 按照系統提示
  • cd test1
  • npm run dev
  
  
• 然后就會進入 8080 本地界面

1.1.4. 自定義首頁

• 在components組件文件夾創建 first.vue
• 編寫代碼：

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

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

1.1.5. router實現頁面跳轉

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

<template><div><router-link to="">轉向A</router-link><router-link to="">轉向B</router-link></div> </template>

新創建兩個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}] }) })

進入跳轉的頁面 first.vue

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

1.1.6. router實現子路由1

• 實現嵌套路由的效果：children:[{},{}]
• 實現多層路由
• 創建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">轉向A1</router-link></p>
• 這時候還不能進入到子路由A1頁面，需要將路由掛載進來，在A.vue中添加<router-view></router-view>
  • 但這里會將原來A.vue頁面的元素也顯示出來，也就是父子頁面同時顯示，可以應用于某些固定的導航欄頁面跳轉

1.2. router實現子路由2

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

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

1.2.1. 為什么不使用#號

• 路由兩種顯示模式
  • hash模式：地址欄包括#符號，且#后面的不被后臺獲取
  • history模式：具有對url歷史記錄進行修改的功能（使用較多）
  
  
• 在微信支付，分享url作為參數傳遞時，#不能滿足需求
• 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）下都會有相應的添加的項
• eslint是規范檢查，應該在開發環境中，生產環境中已經不太需要
• 那我們首先卸載 npm uninstall eslint
• 再重新安裝到 dev 下，npm i eslint -D，這樣就安裝到devDependencies，也就是開發環境下。
  • 不能使用 npm i eslint --dev，這樣還是安裝到生產環境，使用 npm i eslint --save-dev
  • 可以使用 -D/--save-dev 安裝到開發環境，缺一不可

1.2.3. 導入其他項目添加依賴并運行

• 怎樣導入vue-cli項目
• 進入工程文件夾，npm install 安裝相關依賴，部署配置環境，前提是vue和npm都安裝
• npm run dev 開始運行

1.2.4. 居中如何實現（主組件的樣式設置）

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

1.2.5. 小結

• 學習了vuecli基本的文檔結構，掌握了頁面跳轉的基本方法
• 基本的安裝和卸載

1.3. vue-cli3

1.3.1. 手動搭建vue-cli環境

• 步驟
• 安裝依賴 npm install/ cnpm install
• 初始化 npm init -f/ cnpm init -f
• 安裝組件，并查看安裝后的內容
• 具體流程如下：
• 創建文件夾
• 進入文件夾，安裝依賴 npm install
• 初始化 npm init -f，會生成 package.json 的文件
• 安裝router到開發環境，npn i vue-router -D/--save-dve，就會新增一個 node_modules 的文件夾
  • 如果是全局安裝，會安裝到nodejs文件夾中的 node_modules文件夾
  
  
• cd no*，進入到以 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，便可以進入ui界面

1.3.4. vue-cli3創建項目

首先創建新的文件夾，md test3，然后進入 cd test3

創建新的工程 vue create test3

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

我們選擇后面的一項，然后可以進入選擇更多的插件

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

選擇history mode for router為 yes

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

回車到開始安裝

安裝結束后，系統系統， cd test3, npm run serve

App running at:

Local: http://localhost:8080/

Network:?http://172.31.226.37:8080/

上面是localhost

下面是本機配置的局域網IP地址

1.3.5. 項目目錄結構

• vue-cli3和vue-cli2有較大區別
• 主要源程序還是在 src目錄結構下， src下的components主要存放組件，views下主要存放視圖

1.3.6. vue-cli3導入其他項目

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

1.3.7. vue-cli3創建新項目案例

• 進入 test3/test3
• 啟動 npm run serve
• 開始修改項目
• 先在 components文件夾下創建新的組件 first.vue

<template><div><router-link to="">轉向A組件/頁面></router-link><router-link to="">轉向B組件/頁面></router-link></div> </template>

在router 文件夾下的index.js中導入并使用

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

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

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

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

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

原來的first.vue中添加跳轉的路徑

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

1.3.8. 嵌套路由

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

在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中的內容，凡是作為不跳轉的頁面，都需要設置一個掛載點

添加

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

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

直接在組件頁面中添加<style>--內部樣式表

使用外部樣式表，在public文件夾中創建樣式文件ys1.css

在first.vue文件中導入，替換原來內部樣式表的部分，為 @import "路徑名"

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

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

1.4.1. 頁面初始化

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

import Vue from 'vue' export default new Vue // 當做是公共的來做參數傳遞

在要放置各個組件的主頁面First.vue中，導入各個組件，在末尾添加script標簽

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

然后在 First.vue頁面的適當位置使用<Left>/<Right>標簽插入相關的組件

1.4.2. 實現左邊固定導航欄，右邊頁面隨不同導航變化

• 因為左側有多個導航菜單鍵，右邊只有一個頁面去顯示變化，所以要實現?組件復用?的功能。
• 首先給左邊導航的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 觸發 Msg的on事件，將1的值賦給val，觸發到on},menu2:function() {Msg.$emit("val","2"); //通過 emit 觸發 Msg的on事件，將1的值賦給val，觸發到on}}} </script>

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

<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代表當前vue本身，也就是 kk 的數據，左邊是this的副本Msg.$on('val',function(m){this.kk = m; //錯誤，這里this表示的是 on 事件中的內容，不再是當前vue，所以找不到 kk，所以使用 _this_this.kk = m;}) //使用 on 來接收，val是另一個文件傳過來的值，接受的值傳給 m} } </script>

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

1.4.3. 擴展右側導航欄

• 原來只有一個頁面的顯示，這里重新修改擴展右側導航欄

<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數據

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

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

• 在components文件夾下面創建 goodsList.vue

<template><div name="show"><ul><li v-for="goods in list"><img v-bind:src="goods.img"> //要把json中的數據存放到 list 中 <p>{{good.goodName}}</p> //img和goodName是json數據中的鍵的名字</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 中編寫相關的代碼
• 首先導入相關文件?import GoodList from './goodList.vue'
• 然后進行組件的注冊，在export default中新增一項?javascript components: [ GoodList ]
• 使用?<GoodList>?替換原來的 11111111111/22222222222等
• 然后在 goodList.vue文件中，添加相應的樣式來使得頁面正常顯示

1.4.5. 多個導航功能實現

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

props: {goodId: Number } watch: { //watch 監聽父組件到子組件傳值的參數,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" //根據點擊導航欄菜單的不同，選擇不同的json文件}this.$http.get(url).then(function(res){ //這里的get就是用變量的寫法，url的值傳給 resobj.list = res.data;})return {list: []}} }

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

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

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

watch: { //watch 監聽父組件到子組件傳值的參數,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" //根據點擊導航欄菜單的不同，選擇不同的json文件} else { // 上面 goodId==0 就通過這里處理url = "json/bji.json" //這里可以顯示默認的頁面 }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小結

• vue-cli2/vue-cli3安裝，卸載，相關插件的安裝，卸載。
• 實現頁面路由、路由嵌套、插件安裝

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。