vue3 常用插件安装命令

1. 路由

 1.1 安装

npm install vue-router@next --save

 1.2 在 main.js中添加全局：

import router from './router'
createApp(App).use(router).mount('#app')

1.3 router创建index.js中配置路由： 

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from "../views/Home";
const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'Home',
        component: Home,
    }
]
const router = createRouter({ history: createWebHashHistory(), routes });

export default router

2. less

 2.1 安装

npm i less --save-dev
npm install -D less-loader@7.x

 2.2 使用

//引用
<style src="./example.css"></style>
//使用 需加 lang="less" scoped
<style lang="less" scoped>
</style>

 2.3 理解vue中less的scoped和/deep/工作原理

<style lang="less" scoped>
	.a{
		/deep/.b{
			background-color:#bfa
		}
	}
</style>
//结果
.a .b[data-v-5cfc4ef6]

//添加deep
<style lang="less" scoped>
	.a{
		/deep/.b{
			background-color:#bfa
		}
	}
</style>

//结果
.a[data-v-5cfc4ef6] .b

3. Element-ui 

 3.1 安装

npm install element-plus --save
npm install @element-plus/icons-vue

 3.2 在 main.js中添加全局：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcon from '@element-plus/icons-vue'

for (let iconName in ElIcon){
    app.component(iconName, ElIcon[iconName])
}
app.use(store).use(ElementPlus, { size: 'default' }).mount('#app');

4. 安装vuex

 4.1 安装

npm install vuex@next --save

 4.2 在 store创建index.js文件：

import { createStore } from 'vuex'


export default createStore({
//类似于 vue 中的 data，用于存放数据模型；
  state: {
  },
//类似于 vue 中的 method，只有通过它的方法函数可以改变 state 的值，而且，它的方法函数必须是同步，不能是异步；
  mutations: {
  },
//只能通过它来调用 mutations 来改变 state 的值，它的函数方法可以是异步的；
  actions: {
  },
//类似于 vue 中 computed，相当于 state 的计算属性
  getters: {
  },
//可以引入多个 module，通过这个属性，可以添加多个 module 进入 Vuex 的 store 中
  modules: {
// shopCarModule: {
    //   namespaced: true,
    //   state: {},
    //   mutations: {},
    //   actions: {},
    //   getters: {}
    // }
  }
})

 4.3 在 main.js中添加全局： 

import store from './store' 

5. 安装axios

 5.1 安装

npm install axios -S

 5.2 在 main.js中添加全局： 

import { createApp } from 'vue'
import axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$axios = axios