一. 安裝
- 安裝@vue/cli
npm install -g @vue/cli
- 創(chuàng)建項(xiàng)目
vue create 項(xiàng)目名
進(jìn)入項(xiàng)目根目錄 npm i element-ui -S
- vue3上使用elementui需要安裝element-plus
npm install element-plus --save
- 安裝Axios,是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中.
進(jìn)入項(xiàng)目根目錄 cnpm i --save axios
- 其他第三方的引入，如echarts
npm install --save 名@版本號(hào)
npm install --save echarts@4.9.0
- 啟動(dòng)項(xiàng)目
npm install //install dependencies
npm run serve
npm run build //build for production with minification
npm run build --report //build for production and view the bundle analyzer report
你可以通過(guò) vue ui 命令使用 GUI 運(yùn)行更多的特性腳本
二. 項(xiàng)目結(jié)構(gòu)
node_modules 存放包管理工具下載安裝的包的文件夾
public 公共資源
src 源文件
. browserslistrc 項(xiàng)目配置工具
.gitignore git配置
babel.config.js 轉(zhuǎn)碼器
package.json 項(xiàng)目依賴文件
- package.json中：devDependencies中的插件只用于開發(fā)環(huán)境，dependencies發(fā)布到生產(chǎn)環(huán)境。
三. 引入
在項(xiàng)目src/main.js中引入依賴
每個(gè) Vue 應(yīng)用都是通過(guò)用 createApp 函數(shù)創(chuàng)建一個(gè)新的應(yīng)用實(shí)例開始的
vue3全局API的變化，一個(gè)新的全局-api-createapp
- vue3 全局引入,main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementUI)
app.use(store).use(router).mount("#app")
- vue2中mian.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render:h => h(App)
}).$mount('#app')
new Vue({
router: router, //路由
store: store, //store 是vuex的實(shí)例化對(duì)象
render:h => h(App) //一個(gè)方法
}).$mount('#app')
ES5的寫法：
render:h => h(App)
render:function(createElement){
return createElement(App)
}
h:render中的行參，createElement縮寫
ES6的寫法： render: createElement => createElement(App)
-
mount
在Vue構(gòu)造函數(shù)時(shí)，需要配置一個(gè)el屬性，如果沒(méi)有沒(méi)有el屬性時(shí)，可以使用.$mount(‘#app’)進(jìn)行掛載。
相當(dāng)于
new Vue({
el: '#app',
router,
render: h => h(App)
});
也可以先得到Virtual DOM，再掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
vue1.x寫法
new Vue({
el: '#app',
components: { App }
});
render
一種渲染函數(shù)，它比模板更接近編譯器，render 函數(shù)的優(yōu)先級(jí)高于根據(jù) template 選項(xiàng)或掛載元素的 DOM 內(nèi) HTML 模板編譯的渲染函數(shù)。js與node.js
JS是由ES(ECMAScript)、DOM(瀏覽器文檔對(duì)象)、BOM(瀏覽器對(duì)象模型)組成。
其中Node.Js就只有ES，目前瀏覽器比較流行的版本就是ES6(ES2015)，老瀏覽器的版本基本上都是ES5。所以alert和document不能在Node運(yùn)行(因?yàn)镹ode沒(méi)有dom和bom)。
- ECMAScript 6.0（以下簡(jiǎn)稱 ES6）
ES6是 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在 2015 年 6 月正式發(fā)布了。它的目標(biāo)，是使得 JavaScript 語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。
ES6既是一個(gè)歷史名詞，也是一個(gè)泛指，含義是5.1版以后的JavaScript的下一代標(biāo)準(zhǔn)，涵蓋了ES2015、ES2016、ES2017等等，而ES2015則是正式名稱，特指該年發(fā)布的正式版本的語(yǔ)言標(biāo)準(zhǔn)。
四. 配置文件
自定義 vue.config.js文件 放在根目錄中，和package.json同級(jí)
module.exports ={
devServer:{
port:8080,
host:'localhost',
open:true,//配置瀏覽器自動(dòng)訪問(wèn)
}
}
五. 路由
-
路由在根目錄中router文件夾
F418BE30-B2B8-4DF3-860F-CCAD63549FD3.png
- 路由跳轉(zhuǎn)：
import router from '@/router'
router.push('/home')
或者：
this.$router.push('/home')
router為Router的實(shí)例，相當(dāng)于一個(gè)全局的路由器對(duì)象，進(jìn)行路由跳轉(zhuǎn)；route相當(dāng)于當(dāng)前正在跳轉(zhuǎn)的路由對(duì)象。。可以從里面獲取name,path,params,query等。
- 獲取路由信息
created(){
console.log(this.$route)
},
- 監(jiān)聽路由變化：
watch:{ //監(jiān)聽
$route(to,from){
console.log(to,from)
}
},
-
多級(jí)路由
截屏2021-11-29 上午10.33.06.png
當(dāng)一進(jìn)到首頁(yè)，需要展示的是真正首頁(yè)的信息，所以：home的redirect:'/index'
-
路由攔截：訪問(wèn)路由時(shí)需要進(jìn)行校驗(yàn)，校驗(yàn)通過(guò)就訪問(wèn)該路由，否則到另一界面
截屏2021-11-29 下午3.14.07.png
六. 組件的封裝與復(fù)用
- 簡(jiǎn)單的代碼分塊
新建Nav.vue 把已經(jīng)寫好的導(dǎo)航代碼移到Nav.vue，并在原文件中導(dǎo)入：
import Nav from './Nav.vue'
export default {
components:{
Nav
}
}
在需要插入組件的代碼處：<Nav/>
-
組件的封裝,傳值
props:父?jìng)髯拥膮?shù)
2.1 把導(dǎo)航分成Nav.vue
截屏2021-11-29 上午10.43.04.png
刷新界面還能保持選中狀態(tài)：exact精確匹配
<el-menu :default-active="$route.path" exact
路由的引入：router
<el-menu :default-active="$route.path" exact mode="horizontal" @select="handleSelect" router>
2.2 根據(jù)組件名name進(jìn)行遞NavItem.vue
2.3 在需要顯示路由界面內(nèi)容的地方：<router-view/>
別忘了在需要子級(jí)路由的父界面處也插入<router-view/>，比如個(gè)人中心下面有賣家操作臺(tái)子級(jí)，需要在個(gè)人中心加<router-view/>
