创建Vue项目即配置

一.在文件下输入

vue create test003

二.把默认的App.vue项目清空   =》 在默认界面写 <router-view></router-view>

<div>
    <router-view></router-view>
</div>

2.1.这时候写到了路由，下载插件

npm i vue-router@3.6.5

  目前最好是这个版本，不然会出现问题

2.2.在src 下创建 router名的文件夹 下面创建 index.js文件   （文件代码 ↓）

import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter)

const routes = [
    {
        path: "/",
        name: "Login",
        component: () => import("@/view/login/index.vue"),
        meta: {
            keepAlive: true,
            activeMenu: 'Login',
            hidden: false,
            name: '注册登录'
        }
    },
]
const router = new VueRouter({
    routes,
})

export default router

  文件路径随意，只要能插入进来就行

2.3.在main.js全局引入

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//三方库
import router from "./router";
import Router from "vue-router";
 
//重写router.push
const routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch((error) => error);
};

//UI框架
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
Vue.use(Antd);

// 全局配置及工具函数(当封装接口时调用)
// import * as utils from "./assets/js/utils";
// Vue.prototype.$utils = utils;
// import config from "./assets/js/config";
// Vue.prototype.$config = config;
// import api from "./common/api"; //引入请求函数
// Vue.prototype.$api = api;
 
new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

注：这时候把上面工作完成后，会出现报错，类似于文件命名规范问题，需要关闭，vue.config.js文件中写，如果没有就创建一个   （代码如下↓）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false
})

这时候需要重新运行下代码 就解决问题

三.写CSS样式时，由于我是嵌套写法，直接写会报错。 （如下写法 ↓）

所以需要下载插件 （代码如下  ↓）

npm i sass-loader@12.6.0
npm i node-sass@4.14.1

注：即使写完了页面还会报错，需要重新运行

四.由于我用的是ant-design-vue框架需下载

npm i ant-design-vue@1.7.8

在main.js全局引入  

//UI框架
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
Vue.use(Antd);

注：需要重新刷新界面

五.由于之后要配置接口 用到axios先下载

npm i axios