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