當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue-Cli 学习整理【转载】

發布時間：2025/3/13 vue 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue-Cli 学习整理【转载】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

新創建兩個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標簽

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

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

因為左側有多個導航菜單鍵，右邊只有一個頁面去顯示變化，所以要實現?組件復用?的功能。
首先給左邊導航的li添加事件，<li @click="menu1">服飾</li><li @click="menu2">家電</li>
然后在Left.vue文件下面寫上 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. 擴展右側導航欄

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

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 学习整理【转载】的全部內容，希望文章能夠幫你解決所遇到的問題。

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