??wei_shuo的個(gè)人主頁(yè)
??wei_shuo的學(xué)習(xí)社區(qū)
??Hello World ！
Vue.js概述
Vue 是一套用于構(gòu)建
用戶界面的漸進(jìn)式JavaScript框架。 與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用（SPA）提供驅(qū)動(dòng)
MVVM模型
- Model：模型層，表示JavaScript對(duì)象
- View：視圖層，表示DOM(HTML操作的元素)
- ViewModel：連接視圖層和數(shù)據(jù)的中間件，Vue.js就是MVVM中的ViewModel層的實(shí)現(xiàn)者
MVVM模型的特點(diǎn)：
- 低耦合：視圖(View)可以獨(dú)立Model變化和修改，一個(gè)ViewModel可以綁定到不同的View上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變
- 可復(fù)用：可以將視圖邏輯放在ViewModel中，讓更多View重用這段視圖邏輯
- 獨(dú)立開(kāi)發(fā)：開(kāi)發(fā)人員可以專(zhuān)注于業(yè)務(wù)邏輯和數(shù)據(jù)開(kāi)發(fā)(ViewModel)，設(shè)計(jì)人員可以專(zhuān)注于頁(yè)面設(shè)計(jì)
- 可測(cè)試：測(cè)試可以針對(duì)ViewModel編寫(xiě)
Hello Vue
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../sources/vue.js"></script>
</head>
<body>
<!--view層 模板-->
<div id="app">
<h1>{{message}}</h1>
</div>
<script>
var vm = new Vue({
el: "#app", //綁定元素
//Model：數(shù)據(jù)
data:{
message:"Hello，Vue!"
}
});
</script>
</body>
</html>
縮寫(xiě) v-bind & v-on
- v-bind縮寫(xiě)
<!-- 完整語(yǔ)法 --> <a v-bind:href="url">...</a> <!-- 縮寫(xiě) --> <a :href="url">...</a> <!-- 動(dòng)態(tài)參數(shù)的縮寫(xiě) (2.6.0+) --> <a :[key]="url"> ... </a>
- v-on縮寫(xiě)
<!-- 完整語(yǔ)法 --> <a v-on:click="doSomething">...</a> <!-- 縮寫(xiě) --> <a @click="doSomething">...</a> <!-- 動(dòng)態(tài)參數(shù)的縮寫(xiě) (2.6.0+) --> <a @[event]="doSomething"> ... </a>總結(jié)：
它們看起來(lái)可能與普通的 HTML 略有不同，但
:與@對(duì)于 attribute 名來(lái)說(shuō)都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會(huì)出現(xiàn)在最終渲染的標(biāo)記中
Vue的7個(gè)屬性
- el屬性
指示vue編譯器從什么地方開(kāi)始解析 vue的語(yǔ)法
- data屬性
組織從view中抽象出來(lái)的屬性，可以說(shuō)將視圖的數(shù)據(jù)抽象出來(lái)存放在data中
- methods屬性
放置頁(yè)面中的業(yè)務(wù)邏輯，js方法一般都放置在methods中
- template屬性
設(shè)置模板，會(huì)替換頁(yè)面元素
- computed屬性
用來(lái)計(jì)算，根據(jù)已經(jīng)存在的屬性計(jì)算出新的屬性，對(duì)于同樣的數(shù)據(jù)，會(huì)緩存
- render屬性
創(chuàng)建真正的Virtual Dom
- watch屬性
監(jiān)聽(tīng)data中數(shù)據(jù)的變化
雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定，是指視圖 View 的變化能實(shí)時(shí)地讓數(shù)據(jù)模型 Model 發(fā)生變化，而數(shù)據(jù)的變化也能實(shí)時(shí)更新到視圖層
- 輸入框雙向數(shù)據(jù)綁定
<!--view層 模板--> <div id="app"> 輸入的文本:<input type="text" v-model="message">{{message}} </div> <script> var vm = new Vue({ el: "#app", //綁定元素 //Model：數(shù)據(jù) data:{ message:"同步更新" } }); </script>
- 單選框雙向數(shù)據(jù)綁定
<!--view層 模板--> <div id="app"> 性別： <input type="radio" name="sex" value="男" v-model="wei_shuo"> 男 <input type="radio" name="sex" value="女" v-model="wei_shuo"> 女 <p> 選中了誰(shuí)：{{wei_shuo}} </p> </div> <script> var vm = new Vue({ el: "#app", //綁定元素 //Model：數(shù)據(jù) data:{ wei_shuo:"" } }); </script>
- 下拉框雙向數(shù)據(jù)綁定
<!--view層 模板--> <div id="app"> 下拉框： <select v-model="selected"> <option>---請(qǐng)選擇---</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </div> <script> var vm = new Vue({ el: "#app", //綁定元素 //Model：數(shù)據(jù) data:{ selected:"---請(qǐng)選擇---" } }); </script>
組件
組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼；組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用，幾乎任意類(lèi)型的應(yīng)用的界面都可以抽象為一個(gè)組件樹(shù)
格式：
Vue.component('my-component-name', { /* ... */ })該組件名就是
Vue.component的第一個(gè)參數(shù)
<!--view層 模板-->
<div id="app">
<!--組件：傳遞給組件中的值；只能通過(guò)props參數(shù)接受-->
<wei_shuo v-for="item in items" v-bind:wei="item"></wei_shuo>
</div>
<script>
<!--定義一個(gè)Vue組件component-->
Vue.component("wei_shuo", {
//接受參數(shù)
props:['wei'],
//模板
template: '<li>{{wei}}</li>'
});
var vm = new Vue({
el: "#app", //綁定元素
//Model：數(shù)據(jù)
data: {
items: ["Java","Linux","前端","后端"]
}
});
</script>
Axios異步通訊
Axios是一個(gè)開(kāi)源的可以用在瀏覽器和NodeJS的異步通訊框架，主要作用是實(shí)現(xiàn)AJAX異步通訊
特點(diǎn)：
- 瀏覽器創(chuàng)建XMLHttpRequests
- 從node.js創(chuàng)建http請(qǐng)求
- 支持Promise API（JS中鏈?zhǔn)骄幊蹋?/li>
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防御XSRF（跨站請(qǐng)求偽造）
背景
Vue.js是一個(gè)視圖層框架，作者（尤雨溪）嚴(yán)格準(zhǔn)守SoC（關(guān)注度分離原則），所以Vue.js并不包含AJAX的通訊功能，為了解決通信問(wèn)題，作者單獨(dú)開(kāi)發(fā)了名為vue-resource的插件，2.0版本以后停止了對(duì)該插件的維護(hù)并推薦了Axios框架
Vue聲明周期
Vue實(shí)例有完整的聲明周期，開(kāi)始創(chuàng)建、編譯模板、掛載DOM、渲染->更新->渲染、卸載等一系列操作，也就是Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，稱(chēng)為Vue的聲明周期
聲明周期鉤子函數(shù)
- 創(chuàng)建前（beforeCreate）
Vue實(shí)例開(kāi)始初始化時(shí)調(diào)用
- 創(chuàng)建后（created）
實(shí)例創(chuàng)建之后進(jìn)行調(diào)用，此時(shí)尚未開(kāi)始DOM編譯
- 載入前（beforeMount）
依然得不到具體的DOM元素，但vue掛載的根節(jié)點(diǎn)已經(jīng)創(chuàng)建
- 載入后（mounted）
在DOM文檔渲染完畢之后進(jìn)行調(diào)用
- 更新前（beforeUpdate）
data更新時(shí)觸發(fā)
- 更新后（updated）
data更新時(shí)觸發(fā)
- 銷(xiāo)毀前（beforeDestroy）
銷(xiāo)毀實(shí)例前進(jìn)行調(diào)用，此時(shí)實(shí)例任然有效
- 銷(xiāo)毀后（destroyed）
實(shí)例被銷(xiāo)毀之后進(jìn)行調(diào)用
- 創(chuàng)建data.json文件
{ "name": "wei_shuo", "url": "http://baidu.com", "page": "1", "isNonProfit": "true", "address": { "street": "陜西", "city": "西安", "country": "中國(guó)" }, "links": [ { "name": "B站", "url": "https://www.bilibili.com/" }, { "name": "4399", "url": "https://www.4399.com/" }, { "name": "百度", "url": "https://www.baidu.com/" } ] }
- 引入vue.js和axios.js
<script src="../sources/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- Vue.html文件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../sources/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- v-cloak 解決閃爍問(wèn)題 --> <style> [v-clock]{ display: none; } </style> </head> <body> <div id="app" v-clock> <div>{{info.name}}</div> <div>{{info.address.street}}</div> <a v-bind:href="info.url">點(diǎn)擊</a> </div> <script> var vm = new Vue({ el: "#app", data() { return { //請(qǐng)求的返回參數(shù)，必須和json字符串一致 info:{ name:null, address:{ street:null, city:null, contry:null }, url:null } } }, mounted() { //鉤子函數(shù) 鏈?zhǔn)骄幊?/span> axios.get('../data.json').then(response => (this.info = response.data)); } }) </script> </body> </html> /* 瀏覽器顯示結(jié)果： wei_shuo 陜西 點(diǎn)擊 */
內(nèi)容分發(fā)（Slot插槽）
Vue.js中使用元素作為承載分發(fā)內(nèi)容的出口，作者稱(chēng)為
插槽，可以應(yīng)用在組合組件的場(chǎng)景中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../sources/vue.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title1"></todo-title>
<todo-items slot="todo-items" v-for="item1 in todoItems" :item="item1"></todo-items>
</todo>
</div>
<script>
<!--定義插槽-->
Vue.component("todo", {
template:
'<div>' +
'<slot name="todo-title"></slot>' +
'<ul>' +
'<slot name="todo-items"></slot>' +
'</ul>' +
'</div>'
});
Vue.component("todo-title",{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props: ['item'],
template: '<li>{{item}}</li>'
});
var vm = new Vue({
el: "#app",
data:{
title1:"wei_shou列表",
todoItems:['學(xué)習(xí)Java','學(xué)習(xí)Linux','學(xué)習(xí)Vue']
}
})
</script>
</body>
</html>
自定義事件（$emit）
自定義事件分發(fā)
格式: this.$emit('自定義事件名',參數(shù)) this.$emit('remove', index);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../sources/vue.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title1"></todo-title>
<todo-items slot="todo-items" v-for="(item1,index) in todoItems" :item="item1" v-bind:index="index"
v-on:remove="removeItems(index)" v-bind:key="index"></todo-items>
</todo>
</div>
<script>
<!--定義插槽-->
Vue.component("todo", {
template:
'<div>' +
'<slot name="todo-title"></slot>' +
'<ul>' +
'<slot name="todo-items"></slot>' +
'</ul>' +
'</div>'
});
Vue.component("todo-title", {
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items", {
props: ['item', 'index'],
//只能綁定當(dāng)前組件的方法
template: '<li>{{index}}---{{item}}<button @click="remove">刪除</button></li>',
methods: {
remove: function (index) {
//自定義事件分發(fā)
//this.$emit('自定義事件名',參數(shù))
this.$emit('remove', index)
}
}
});
var vm = new Vue({
el: "#app",
data: {
title1: "wei_shou列表",
todoItems: ['學(xué)習(xí)Java', '學(xué)習(xí)Linux', '學(xué)習(xí)Vue'],
removeItems: function (index) {
console.log("刪除" + this.todoItems[index] + "OK")
this.todoItems.splice(index, 1); //一次刪除一個(gè)元素
}
}
})
</script>
</body>
</html>
vue-cli項(xiàng)目
vue-cli是官方提供的一個(gè)腳手架，用于快速生成一個(gè)vue的項(xiàng)目模板；預(yù)先定義的目錄結(jié)構(gòu)及基礎(chǔ)代碼，使開(kāi)發(fā)更加快速
功能：
- 統(tǒng)一項(xiàng)目結(jié)構(gòu)
- 本地調(diào)試
- 熱部署
- 單元測(cè)試
- 集成打包上線
- 創(chuàng)建Vue項(xiàng)目，新建目錄
- cmd目錄窗進(jìn)入創(chuàng)建的目錄路徑
- 運(yùn)行vue init webpack myvue命令初始化
等待5分鐘左右，即可初始化完成
項(xiàng)目名稱(chēng)? Project name (myvue)
項(xiàng)目描述? Project description (A Vue.js project)
作者? Author
構(gòu)建(選擇第一個(gè)即可：運(yùn)行時(shí)編譯)? Vue build (Use arrow keys)
vue路由，以下n即是手動(dòng)創(chuàng)建，y即是自動(dòng)創(chuàng)建? Install vue-router? (Y/n)
? Use ESLint to lint your code?(Y/n)
? Set up unit tests (Y/n)
? Setup e2e tests with Nightwatch? (Y/n)
No即不會(huì)自動(dòng)npm install，yes就會(huì)自動(dòng)npm install? Should we run
npm installfor you after the project has been created? (recommended) (Use arrow keys)Yes, use NPM
Yes, use Yarn
No, I will handle that myselfD:\Java\Vue-cli>vue init webpack myvue ? Project name (myvue) ? Project description (A Vue.js project) ? Author ? Vue build (Use arrow keys) > Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re nder functions are required elsewhere ? Install vue-router? No ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) > Yes, use NPM Yes, use Yarn No, I will handle that myself
- 目錄路徑即會(huì)產(chǎn)生myvue目錄
初始化運(yùn)行
cd myvue
npm install
npm run dev
cmd窗口進(jìn)入myvue路徑
執(zhí)行npm install命令
如果中途報(bào)錯(cuò)，安裝命令窗口提示執(zhí)行提示命令即可修復(fù)
- 執(zhí)行npm run dev 啟動(dòng)當(dāng)前項(xiàng)目
- cmd上面的cmd窗口別關(guān)閉，直接訪問(wèn)http://localhost:8080會(huì)出現(xiàn)如下頁(yè)面
IDEA搭建vue-cli項(xiàng)目
- 直接用IDEA——OPEN——myvue目錄即可
Webpack學(xué)習(xí)
webpack 是代碼編譯工具，有入口、出口、loader 和插件。webpack 是一個(gè)用于現(xiàn)代
JavaScript應(yīng)用程序的靜態(tài)模塊打包工具，當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)在內(nèi)部構(gòu)建一個(gè)依賴圖(dependency graph)，此依賴圖對(duì)應(yīng)映射到項(xiàng)目所需的每個(gè)模塊，并生成一個(gè)或多個(gè)bundle。
安裝Webpack
- npm install webpack -g
- npm install webpack-cli -g
測(cè)試安裝成功
- webpack -v
- webpack-cli -v
配置
創(chuàng)建webpack.config.js配置文件
- entry：入口文件，指定webpack用哪個(gè)文件作為項(xiàng)目入口
- output：輸出，指定webpack把處理完成的文件放置到指定路徑
- module：模板，用于處理各類(lèi)類(lèi)型的文件
- plugins：插件，如：熱更新、代碼重用……
- resolve：設(shè)置路徑指向
- watch：監(jiān)聽(tīng)，用于設(shè)置文件改動(dòng)后直接打包
webpack使用
- 創(chuàng)建項(xiàng)目
- 創(chuàng)建名為modules的目錄，用于放置JS模板等資源文件
- modules下創(chuàng)建模板文件，用于編寫(xiě)JS模板相關(guān)代碼（hello.js）
//暴露一個(gè)方法 exports.sayHi = function () { document.write("<h1>wei_shuo</h1>") }
- modules下創(chuàng)建入口文件，用于打包時(shí)設(shè)置entry屬性（main.js）
var hello = require("./hello"); hello.sayHi();
- 項(xiàng)目目錄下創(chuàng)建配置文件（webpack.config.js）
module.exports = { entry: './modules/main.js', output: { filename: "./js/bundle.js" } };
- 在IDEA終端使用webpack命令打包（bundle.js）
(()=>{var r={645:(r,t)=>{t.sayHi=function(){document.write("<h1>wei_shuo</h1>>")}}},t={};(function e(o){var i=t[o];if(void 0!==i)return i.exports;var n=t[o]={exports:{}};return r[o](n,n.exports,e),n.exports})(645).sayHi()})();
- 項(xiàng)目目錄下創(chuàng)建HTML頁(yè)面，導(dǎo)入webpack打包后的JS文件（index.html）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!--前端的模塊化開(kāi)發(fā)--> <script src="dist/js/bundle.js"> </script> </body> </html>
說(shuō)明
參數(shù) --watch 用于監(jiān)聽(tīng)變化
webpack --watch
vue-router路由
Vue Router 是
Vue.js的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉功能：vue-router官方
- 嵌套路由映射
- 動(dòng)態(tài)路由選擇
- 模塊化、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 展示由 Vue.js 的過(guò)渡系統(tǒng)提供的過(guò)渡效果
- 細(xì)致的導(dǎo)航控制
- 自動(dòng)激活 CSS 類(lèi)的鏈接
- HTML5 history 模式或 hash 模式
- 可定制的滾動(dòng)行為
- URL 的正確編碼
安裝vue-router
- 基于第一個(gè)
vue-cli進(jìn)行測(cè)試學(xué)習(xí)；查看node_modules中是否存在vue-router- vue-router是一個(gè)插件包，所以需要用npm&cnpm進(jìn)行安裝
- 打開(kāi)IDEA終端，輸入命令，安裝vue-router
npm install vue-router --save-dev
- 因?yàn)橐蕾囮P(guān)系報(bào)錯(cuò)則，使用如下安裝命令
npm install --legacy-peer-deps vue-router --save-dev
- 如果報(bào)錯(cuò)信息顯示run
npm audit fixto fix them，ornpm auditfor details；根據(jù)信息執(zhí)行提示命令即可npm audit fix npm audit
- 在項(xiàng)目main.js中導(dǎo)入，并使用
//導(dǎo)入安裝的vue-router組件 import VueRouter from 'vue-router' //顯示聲明使用VueRouter Vue.use(VueRouter);
測(cè)試
- IDEA終端運(yùn)行項(xiàng)目
npm run dev
- 如果出現(xiàn)報(bào)錯(cuò)
"export 'default' (imported as 'VueRouter') was not found in 'vue-router'
兩種原因：
- 路由格式編寫(xiě)錯(cuò)誤
路由格式
routes: [{ // 路徑 path: '/home', // 組件名 component: Home }];
- 對(duì)應(yīng)版本不兼容
安裝的時(shí)候默認(rèn)安裝最新版本可能與其他插件不兼容，推薦使用穩(wěn)定版本vue-router@3.5.2
卸載：npm uninstall vue-router 下載&降級(jí)：npm install vue-router@3.5.2 --save-dev // @xxx 自己指定版本
- 再次運(yùn)行項(xiàng)目（npm run dev）
- main.js 代碼
import Vue from 'vue' import App from './App' //導(dǎo)入安裝的vue-router組件 import VueRouter from 'vue-router' //顯示聲明使用VueRouter Vue.use(VueRouter); Vue.config.productionTip = false new Vue({ el: '#app', components: { App }, template: '<App/>' })
- App.vue代碼
<template> <div id="app"> <h1>歡迎wei_shuo</h1> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
vue-router使用
創(chuàng)建公共組件目錄components
目錄components下創(chuàng)建vue組件
- Content.vue
<!--頁(yè)面編寫(xiě)--> <template> <h1>內(nèi)容頁(yè)面</h1> </template> <!--vue對(duì)象--> <script> export default { name: "Content" } </script> <!--scoped作用域，添加scoped只在當(dāng)前頁(yè)面生效--> <style scoped> </style>
- Main.vue
<template> <h1>首頁(yè)</h1> </template> <script> export default { name: "Main" } </script> <style scoped> </style>
創(chuàng)建存放路由的文件夾router
目錄router創(chuàng)建router路由
- index.js
//導(dǎo)入vue和vue-router組件 import Vue from "vue"; import VueRouter from "vue-router"; import Content from "../components/Content"; import Main from "../components/Main"; //安裝路由 Vue.use(VueRouter); //配置導(dǎo)出路由 export default new VueRouter({ routes:[ { //路由路徑 path:'/content', name:'content', //跳轉(zhuǎn)組件 component:Content }, { //路由路徑 path:'/main', name:'content', //跳轉(zhuǎn)組件 component:Main } ] });
配置路由
在main.js中配置路由
import Vue from 'vue' import App from './App' //導(dǎo)入配置路由文件 import router from './router' //自動(dòng)掃描里面的路由配置 Vue.config.productionTip = false new Vue({ el: '#app', //配置路由 router, components: { App }, template: '<App/>' })
使用路由
在App.vue中使用路由
<template> <div id="app"> <h1>歡迎wei_shuo</h1> <!--跳轉(zhuǎn)連接--> <router-link to="/main">首頁(yè)</router-link> <router-link to="/content">內(nèi)容頁(yè)面</router-link> <!--展示視圖--> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
vue-router使用流程
- components目錄下創(chuàng)建vue組件（wei.vue）
<template> <h1>wei</h1> </template> <script> export default { name: "wei" } </script> <style scoped> </style>
- 目錄router創(chuàng)建router路由（index.js）
//導(dǎo)入vue和vue-router組件 import Vue from "vue"; import VueRouter from "vue-router"; //導(dǎo)入components目錄中vue組件 import wei from "../components/wei" //安裝路由 Vue.use(VueRouter); //配置導(dǎo)出路由 export default new VueRouter({ routes:[ { //路由路徑 path:'/wei', //name 可省略 name:'content', //跳轉(zhuǎn)組件 component:wei } ] });
- 在main.js中配置路由
<template> <div id="app"> <h1>歡迎wei_shuo</h1> <!--跳轉(zhuǎn)連接--> <router-link to="/wei">wei</router-link> <!--展示視圖--> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
- 在App.vue中使用、導(dǎo)入配置路由
import Vue from 'vue' import App from './App' //導(dǎo)入配置路由文件 import router from './router' //自動(dòng)掃描里面的路由配置 Vue.config.productionTip = false new Vue({ el: '#app', //配置路由 router, components: { App }, template: '<App/>' })
結(jié)果測(cè)試
- 網(wǎng)頁(yè)點(diǎn)擊
首頁(yè)
- 點(diǎn)擊
內(nèi)容頁(yè)面
- 點(diǎn)擊
wei
Axios
Axios 是一個(gè)基于
promise（異步編程的一種解決方案）網(wǎng)絡(luò)請(qǐng)求庫(kù)，作用于node.js和瀏覽器中， 它是isomorphic（即同一套代碼可以運(yùn)行在瀏覽器和node.js中）；服務(wù)端它使用原生 node.jshttp模塊,，而在客戶端 （瀏覽端）則使用 XMLHttpRequests異步編程：異步編程是讓程序并發(fā)運(yùn)行的一種手段
功能：Axios中文網(wǎng)
- 從瀏覽器創(chuàng)建
XMLHttpRequests- 從 node.js 創(chuàng)建
http請(qǐng)求- 支持
PromiseAPI- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防御
XSRF
安裝
$ npm install axios
Vue+ElementUI
Element，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)
Element官網(wǎng)
創(chuàng)建工程
- 創(chuàng)建hello-vue工程
vue init webpack hello-vue
- 安裝依賴，需要安裝vue-router、element-ui、sass-loader、node-sass四個(gè)插件
# 進(jìn)入工程目錄 cd hello-vue # 安裝 vue-router npm install vue-router --save-dev # 安裝 element-ui npm i element-ui -S # 安裝依賴 npm install # 安裝 SASS 加載器 cnpm install sass-loader node-sass --save-dev # 啟動(dòng)測(cè)試 npm run dev
- 安裝 vue-router過(guò)程中如果報(bào)錯(cuò)依賴錯(cuò)誤，則繞過(guò)依賴安裝
npm install vue-router --save-dev --legacy-peer-deps
- 安裝element-ui報(bào)錯(cuò)依賴過(guò)程中如果報(bào)錯(cuò)依賴錯(cuò)誤，則繞過(guò)依賴安裝
npm i element-ui -S --save-dev --legacy-peer-deps
- 安裝依賴過(guò)程中如果報(bào)錯(cuò)依賴錯(cuò)誤，則繞過(guò)依賴安裝
npm install --save-dev --legacy-peer-deps
- 安裝 SASS 加載器WARNING是警告，可以忽略
cnpm install sass-loader node-sass --save-dev
- 啟動(dòng)測(cè)試
npm run dev
- 使用IDEA打開(kāi)hello-vue項(xiàng)目
項(xiàng)目搭建
創(chuàng)建頁(yè)面目錄（views）和前端路由目錄（routers）
頁(yè)面目錄（views）下創(chuàng)建
Main.vue（首頁(yè)）
<template> <h1>首頁(yè)</h1> </template> <script> export default { name: "Main" } </script> <style scoped> </style>
- Login.vue（登錄頁(yè)面）
<template> <div> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">歡迎登錄</h3> <el-form-item label="賬號(hào)" prop="username"> <el-input type="text" placeholder="請(qǐng)輸入賬號(hào)" v-model="form.username"/> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input type="password" placeholder="請(qǐng)輸入密碼" v-model="form.password"/> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button> </el-form-item> </el-form> <el-dialog title="溫馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>請(qǐng)輸入賬號(hào)和密碼</span> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false">確 定</el-button> </span> </el-dialog> </div> </template> <script> export default { name: "Login", data() { return { form: { username: '', password: '' }, // 表單驗(yàn)證，需要在 el-form-item 元素中增加 prop 屬性 rules: { username: [ {required: true, message: '賬號(hào)不可為空', trigger: 'blur'} ], password: [ {required: true, message: '密碼不可為空', trigger: 'blur'} ] }, // 對(duì)話框顯示和隱藏 dialogVisible: false } }, methods: { onSubmit(formName) { // 為表單綁定驗(yàn)證功能 this.$refs[formName].validate((valid) => { if (valid) { // 使用 vue-router 路由到指定頁(yè)面，該方式稱(chēng)之為編程式導(dǎo)航 this.$router.push("/main"); } else { this.dialogVisible = true; return false; } }); } } } </script> <style lang="scss" scoped> .login-box { border: 1px solid #DCDFE6; width: 350px; margin: 180px auto; padding: 35px 35px 15px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 25px #909399; } .login-title { text-align: center; margin: 0 auto 40px auto; color: #303133; } </style>
- 前端路由目錄（routers）下創(chuàng)建index.js
//導(dǎo)入vue和vue-router組件 import Vue from "vue"; import Router from 'vue-router' //添加路由組件 import Main from "../views/Main"; import Login from "../views/Login"; //使用vue-router組件 Vue.use(Router) //導(dǎo)出默認(rèn)接口路由 export default new Router({ routes:[ { //路由路徑 path:'/main', //跳轉(zhuǎn)組件 component:Main }, { //路由路徑 path:'/login', //跳轉(zhuǎn)組件 component:Login } ] });
- main.js（入口js文件）
import Vue from 'vue' import App from './App' //導(dǎo)入配置路由文件，自動(dòng)掃描里面的路由配置 import router from './routers' //導(dǎo)入ElementUI import Element from 'element-ui' //導(dǎo)入ElementUI的CSS import 'element-ui/lib/theme-chalk/index.css'; //安裝路由 Vue.use(router); //安裝ElementUI Vue.use(Element) Vue.config.productionTip = false new Vue({ el: '#app', //路由 router, //ElementUI render: h => h(App) })
- App.vue（根組件）
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script>
- IDEA終端運(yùn)行
npm run dev
排錯(cuò)分析
排錯(cuò)一
- 運(yùn)行項(xiàng)目報(bào)錯(cuò)，this.getOptions is not a function，說(shuō)明sass-loader版本太高
npm run dev
- package.json文件中降低sass-loader版本
- 更改完sass-loader版本，然后在終端使用npm install命令
- 如果報(bào)錯(cuò)依賴無(wú)法解析如下
- 則執(zhí)行命令，如下所示則成功
npm install --legacy-peer-deps
排錯(cuò)二
Module build failed: Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.
- 錯(cuò)誤來(lái)自sass-loader，因?yàn)閚ode-sass @latest為v8.0.0，而sass-loader期望值為^ 4.0.0
- 卸載5.0 重裝系統(tǒng)提示需求版本即可（4.0.0）的就可以了
// 卸載node-sass npm uninstall node-sass --legacy-peer-deps // 然后安裝需求版本 cnpm install node-sass@4.14.1 --legacy-peer-deps
排錯(cuò)三
Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
查看本機(jī)安裝的node版本安裝對(duì)應(yīng)的node-sass版本
- 部分對(duì)應(yīng)版本
node版本：v14.18.3 node-sass版本：4.7.2 sass-loader版本：7.3.1 node版本：16.13.1 node-sass版本：6.0.1 sass-loader版本：10.0.1
- 查看自己的node版本，我的是node16，所以應(yīng)安裝node-sass 6.0+版本
D:\Java\Vue-cli\hello-vue>node -v v16.18.0
安裝node-sass 6.0+版本（6.0.1）
package.json調(diào)整版本
"sass-loader": "^6.0.1"
- 終端執(zhí)行命令更新依賴項(xiàng)
npm install --legacy-peer-deps
- 安裝對(duì)應(yīng)版本的node-sass
cnpm install node-sass@6.0.1 --legacy-peer-deps
排錯(cuò)四
"export 'default' (imported as 'Router') was not found in 'vue-router'
- 原因一：路由格式編寫(xiě)錯(cuò)誤
routes: [{ // 路徑 path: '/home', // 組件名 component: Home }];
- 原因二：下載或者卸載已有版本
卸載：npm uninstall vue-router 下載&降級(jí)：npm install vue-router@3.5.2 --save-dev // @xxx 自己指定版本降級(jí)之后，需要使用命令更新依賴
npm install --legacy-peer-deps
排錯(cuò)總結(jié)
- 版本問(wèn)題，更改package.json版本后，需要執(zhí)行更新依賴的命令
npm install --legacy-peer-deps
- 系統(tǒng)提示執(zhí)行命令，可以直接執(zhí)行即可
- 錯(cuò)誤多半是版本兼容錯(cuò)誤，調(diào)整對(duì)應(yīng)版本即可，如果是依賴錯(cuò)誤的話，需要在命令后加上
--legacy-peer-deps
運(yùn)行項(xiàng)目
- 運(yùn)行項(xiàng)目
npm run dev
vue項(xiàng)目目錄分析
build：構(gòu)建腳本目錄
config：項(xiàng)目配置
node_modules：npm加載項(xiàng)目的依賴模塊
src：源碼目錄
- main.js——入口js文件
- App.vue——根組件
- components——共組件目錄
- assets——資源目錄，這里的資源會(huì)被wabpack構(gòu)建
- routes——前端路由
- store——應(yīng)用級(jí)數(shù)據(jù)（state）
- views——頁(yè)面目錄
static：靜態(tài)資源目錄，不會(huì)被webpack構(gòu)建
package.json：npm包配置文件，定義項(xiàng)目的npm腳本、依賴包等信息
README.md：項(xiàng)目的說(shuō)明文檔，markdown格式
npm命令解析
- 安裝模塊到項(xiàng)目下
npm install moduleName
- -g：模塊安裝到全局
npm install -g moduleName
- –save：模塊安裝到項(xiàng)目下，并在package文件的devDependencies結(jié)點(diǎn)寫(xiě)入依賴，-S 為縮寫(xiě)
npm install --save moduleName
- –save-dev：將模塊安裝到項(xiàng)目目錄下，并且在package文件devDependencies結(jié)點(diǎn)寫(xiě)入依賴，-D為縮寫(xiě)
npm install --save-dev moduleName
路由嵌套
嵌套路由（子路由），實(shí)際應(yīng)用中，通常由多層嵌套的組件組合而成，同樣的URL中各段動(dòng)態(tài)路徑也按某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件
/user/johnny/profile /user/johnny/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
項(xiàng)目結(jié)構(gòu)
創(chuàng)建頁(yè)面目錄（views）和前端路由目錄（routers）
頁(yè)面目錄（views）下創(chuàng)建，user目錄
main.vue（首頁(yè)）
<template> <div> <el-container> <el-aside width="200px"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template> <el-menu-item-group> <el-menu-item index="1-1"> <!--插入的地方--> <router-link to="/user/profile">個(gè)人信息</router-link> </el-menu-item> <el-menu-item index="1-2"> <!--插入的地方--> <router-link to="/user/list">用戶列表</router-link> </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-caret-right"></i>內(nèi)容管理</template> <el-menu-item-group> <el-menu-item index="2-1">分類(lèi)管理</el-menu-item> <el-menu-item index="2-2">內(nèi)容列表</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-caret-right"></i>系統(tǒng)管理</template> <el-menu-item-group> <el-menu-item index="3-1">系統(tǒng)信息</el-menu-item> <el-menu-item index="3-2">系統(tǒng)內(nèi)容</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>個(gè)人信息</el-dropdown-item> <el-dropdown-item>退出登錄</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <!--在這里展示視圖--> <router-view/> </el-main> </el-container> </el-container> </div> </template> <script> export default { name: "Main" } </script> <style scoped lang="scss"> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style>
- ProFile.vue（個(gè)人信息）
<template> <h1>個(gè)人信息</h1> </template> <script> export default { name: "UserProFile" } </script> <style scoped> </style>
- List.vue（用戶列表）
<template> <h1>用戶列表</h1> </template> <script> export default { name: "UserList" } </script> <style scoped> </style>
- 前端路由目錄（routers）下創(chuàng)建index.js
//導(dǎo)入vue和vue-router組件 import Vue from "vue"; import Router from 'vue-router' //添加路由組件 import Main from "../views/Main" import Login from "../views/Login" import UserList from '../views/user/List' import UserProFile from '../views/user/ProFile' //使用vue-router組件 Vue.use(Router) //導(dǎo)出默認(rèn)接口路由 export default new Router({ routes: [ { //路由路徑 path: '/main', //跳轉(zhuǎn)組件 component: Main, //嵌套路由 children: [ {path: '/user/profile', component: UserProFile}, {path: '/user/list', component: UserList} ] }, { //路由路徑 path: '/login', //跳轉(zhuǎn)組件 component: Login } ] });
- main.js（入口js文件）
import Vue from 'vue' import App from './App' //導(dǎo)入配置路由文件，自動(dòng)掃描里面的路由配置 import router from './routers' //導(dǎo)入ElementUI import Element from 'element-ui' //導(dǎo)入ElementUI的CSS import 'element-ui/lib/theme-chalk/index.css'; //安裝路由 Vue.use(router); //安裝ElementUI Vue.use(Element) Vue.config.productionTip = false new Vue({ el: '#app', //路由 router, //ElementUI render: h => h(App) })
- App.vue（根組件）
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script>
- IDEA終端運(yùn)行
路由模式
- hash：帶路徑#符號(hào)，如：http://localhost/#/login
- history：路徑不帶#符號(hào)，如：http://localhost/login
export default new Router({
mode:'history',
routes: [
]
});
參數(shù)傳遞&重定向
參數(shù)傳遞
- Main.vue
<!--插入的地方 name：傳遞組件名 params:傳遞參數(shù)--> <router-link v-bind:to="{name:'UserProFile',params:{id:1}}">個(gè)人信息</router-link>
- ProFile.vue
<template> <div> <h1>個(gè)人信息</h1> <!--{{ 方式一：$route.params.id }}--> {{id}} </div> </template> <script> export default { //方式二： props:['id'], name: "UserProFile" } </script> <style scoped> </style>
重定向
//導(dǎo)出默認(rèn)接口路由
export default new Router({
mode:'history',
routes: [
//重定向
{
path:'/goHome',
redirect:'/main' //重定向路徑
}
]
});
404頁(yè)面
- views頁(yè)面目錄，創(chuàng)建404頁(yè)面
- NotFound.vue
<template> <div> <h1>404，你的頁(yè)面走丟了！</h1> </div> </template> <script> export default { name: "NotFound" } </script> <style scoped> </style>
- index.js配置
import NotFound from "../views/NotFound" //導(dǎo)出默認(rèn)接口路由 export default new Router({ mode:'history', routes: [ { path:'/*', component:NotFound } ] });
路由鉤子&異步請(qǐng)求
路由鉤子
beforeRouteEnter：在進(jìn)入路由前執(zhí)行
beforeRouteLeave：在離開(kāi)路由前執(zhí)行
- to：路由將要跳轉(zhuǎn)的路徑信息
- from：路徑跳轉(zhuǎn)前的路徑信息
- next：路由的控制參數(shù)
- next() 跳入下一個(gè)頁(yè)面
- next(‘/path’) 改變路由的跳轉(zhuǎn)方向，使其跳到另一個(gè)路由
- next(false) 返回原來(lái)頁(yè)面
- next((vm)=>{}) 僅在beforeRouteEnter中使用，vm是組件實(shí)例
<script>
export default {
//進(jìn)入路由之前執(zhí)行
beforeRouteEnter:(to,from,next)=>{
console.log("STARE");
next();
},
//進(jìn)入路由之后執(zhí)行
beforeRouteLeave:(to,from,next)=>{
console.log("END");
next();
}
}
</script>
異步請(qǐng)求
- 安裝Axios和vue-axios
cnpm install axios -s cnpm install --save vue-axios
- 安裝Axios
- main.js中導(dǎo)入Axios組件
//導(dǎo)入Axios import axios from 'axios' import VueAxios from 'vue-axios' //安裝axios和VueAxios Vue.use(VueAxios, axios)
Vue工程化項(xiàng)目目錄結(jié)構(gòu)
node_modules 通過(guò)npm install命令安裝的軟件包存放的目錄（非全局安裝）
dist 項(xiàng)目打包發(fā)布目錄
public 最后打包時(shí)，該目錄中的文件會(huì)直接復(fù)制到dist目錄中
- public/index.html 首頁(yè)入口文件
- public/favicon.ico 圖標(biāo)文件
src
src/assets 靜態(tài)資源文件目錄
src/components 組件文件目錄
src/router 路由插件目錄
- src/router/index.js 路由插件配置文件
src/store 狀態(tài)管理插件目錄
- src/store/index.js 狀態(tài)管理插件配置文件
src/plugins 插件目錄，一般存放axios.js插件文件
src/views 組件文件目錄（僅僅具有模板和樣式，沒(méi)有js程序）
src/App.vue 應(yīng)用組件
src/main.js 程序邏輯入口文件
package.json 包管理配置文件，記錄項(xiàng)目需要的各種軟件包信息
package-lock.json 包版本鎖定配置文件
vue.config.js vue項(xiàng)目配置文件
?? 結(jié)語(yǔ)：創(chuàng)作不易，如果覺(jué)得博主的文章賞心悅目，還請(qǐng)——
點(diǎn)贊??收藏??評(píng)論??沖沖沖??文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-850033.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-850033.html
到了這里，關(guān)于IDEA搭建vue-cli | vue-router | 排錯(cuò)思路、Webpack、Axios、周期、路由、異步、重定向的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3項(xiàng)目(組件、圖標(biāo)等按需引入)[保姆級(jí)]](https://imgs.yssmx.com/Uploads/2024/01/418790-1.jpeg)
