Vue-Cli 学习整理【转载】
生活随笔
收集整理的這篇文章主要介紹了
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.1. vue-cli2腳手架
-
- 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.3. 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
- 編寫代碼:
- 進入router文件夾下的 index.js,用來控制頁面路由,添加代碼,
- 首先引入?import First from '@/components/first'
- 然后重新執行,npm run dev
1.1.5. router實現頁面跳轉
- 在首頁,可以通過鏈接進入a,b兩個“頁面”,其實是進入components中的vue頁面
- 修改 first.vue
1.1.6. router實現子路由1
- 實現嵌套路由的效果:children:[{},{}]
- 實現多層路由
- 創建A1.vue作為A的子路由
- 首先引入:import A1 from '@/components/A1
- 作為子路由:
- 在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去掉,并將里面的內容提取到平級的部分
1.2.1. 為什么不使用#號
- 路由兩種顯示模式
- hash模式:地址欄包括#符號,且#后面的不被后臺獲取
- history模式:具有對url歷史記錄進行修改的功能(使用較多)
- 在微信支付,分享url作為參數傳遞時,#不能滿足需求
- history需要后臺配合,處理404問題
- 去掉#符號,在index.js文件中修改
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創建項目
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
- 要注意注釋掉原來 Home 的路由
- 在components文件夾下添加要跳轉的 A、B組件
- 按照上面同樣的方法在 index.js 中導入并使用
1.3.8. 嵌套路由
1.3.9. vue-cli3添加樣式的三種方式
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 的事件總線文件,代碼如下:
1.4.2. 實現左邊固定導航欄,右邊頁面隨不同導航變化
- 因為左側有多個導航菜單鍵,右邊只有一個頁面去顯示變化,所以要實現?組件復用?的功能。
- 首先給左邊導航的li添加事件,<li @click="menu1">服飾</li><li @click="menu2">家電</li>
- 然后在Left.vue文件下面寫上 script 腳本
- vue文件中如果要添加腳本,script放在最后,其中 export default{} 是必須要寫的,不然沒法顯示出來。
- 在 Right.vue 文件中去接受相應的值
- 這里有個坑:事件總線這里命令為 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,存放數據如下:
- 在components文件夾下面創建 goodsList.vue
- 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中添加一項
- 同時要修改上面 data() 部分的代碼,增加判斷語句然后給 url 賦予不同的 json 數據
1.4.6. 解決刷新以及初始化顯示的問題
- 上面需要點擊導航欄的菜單項才會顯示出來,這里給它添加一個默認顯示的項
- 只需要在上面的 data 和 watch 函數中添加一個 else
- 然后修改 Right.vue 文件
1.4.7. vue-cli3小結
- vue-cli2/vue-cli3安裝,卸載,相關插件的安裝,卸載。
- 實現頁面路由、路由嵌套、插件安裝
?
總結
以上是生活随笔為你收集整理的Vue-Cli 学习整理【转载】的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: flask+vue进阶
- 下一篇: 前端页面可视化设计工具