vue3 vue-cli3.0.4安装各种插件命令

在写vue3项目时，用到了各种命令来安装插件，在此记录

1.安装路由

npm install vue-router

安装最新版本的

npm install vue-router@next --save

在 main.js中添加如下内容：

import router from './router'

createApp(App).use(router).mount('#app')

在router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from "../views/Home";

const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'Home',
        component: Home,
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})


export default router

这样下来路由地址是这样的：很完美！！！

http://localhost:8080/home

若把路由里的createWebHistory换成createHashWebHistory ，路由是这样子的：

http://localhost:8080/#/home

2. 安装less

首先安装这俩

npm i less-loader less --save-dev

注：后续可能会出错，因为会出现less-loader版本高而报错

所以可以分开安装即

npm i less --save-dev

npm install -D less-loader@7.x

使用less

在 main.js中添加如下内容：

import less from 'less'

createApp(App).use(router).use(less).mount('#app')

2021.8.25发现less不用在main.js中引入，引入反而会出现警告报错

然后在自己的vue项目中想要用到less 的地方使用 lang="less"即可使用
例如:

<style lang="less" scoped>
  .wall {
    height: 900px;
    background: aquamarine;
      .header{
        height:400px;
        background:black;
      }
  }
</style>

3. 安装Element-ui

在vue3.x中不能继续使用vue2.x的方式安装使用element，如：

安装：

npm i element-ui -S

main.js中：

import Element from 'element-ui'
createApp(App).use(Element).mount('#app')

这样会出现很多错误，导致无法使用element，应该使用vue3.x的方式安装引用：

推荐vue3安装element-plus：
安装：

npm install element-plus --save

在main.js写如下内容：

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

element-plus官方文档

4. 安装jQuery

npm i --save jquery

在vue.config.js中webpack配置configureWebpack添加jquery插件：
在项目根目录下创建文件vue.config.js，与package.json同级。

const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        //支持jquery
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    },
};

package.json中eslint配置项env中添加"jquery":true

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery": true //此处配置意思为全局引入jquery，详情可查看文档
    },
   ...
  }

验证是否安装成功

$(function () {alert ("测试");});

5. 安装Bootstrap

安装bootstrap前，必须先安装jQuery

安装bootstrap最新版：

npm install bootstrap --save-dev

指定版本安装：

npm install bootstrap@3 --save-dev

main.js中加入：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

6.安装vuex

npm install vuex@next --save

在根目录下创建store文件夹，在store文件夹下创建index.js文件，在index.js文件中写以下代码：

import { createStore } from 'vuex'

export default createStore({
    state: {
        count: 0
    },
    mutations: {
    // 进行数据更新，改变数据状态
        countType(state, action){
            state.count =  state.count + action.payload
        }
    },
    actions: {
    //执行动作，数据请求
        addCount({commit}){
            fetch('../data.json')
            .then(function(response) {
                return response.json();
            })
            .then(function(myJson) {
                let action = {
                    type: 'countType',
                    payload: myJson.text
                }
                commit(action)
            });
        }
    },
    getters: {
    // 获取到最终的数据结果
        getCount(state){
            return state.count
        }
    }
})

main.js中：

import { createApp } from 'vue'
import store from './store'

createApp(App).use(store).mount('#app')

7.安装axios

npm install axios -S

main.js中：

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