Vue3整合vue-router实践

原文链接：创建Vue3项目

安装 Vue-Cli

• 安装依赖：npm install -g @vue/cli or cnpm install -g @vue/cli
• 查看安装结果： vue --version

• 升级： npm update -g @vue/cli
• 创建项目：vue create admin
• 选择相应的配置

安装 vue-router

• 安装依赖：npm install vue-router@4 or yarn add vue-router@4
• 在 src 下新建 router 文件夹 并新建 index.js 文件

 import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
   {
       path: '/',
       component: () => import('../views/HelloWorld')
   },
   {
       path: '/login',
       component: () => import('../views/login.vue')
   }
];
const router = createRouter({
   history: createWebHashHistory(),
   routes
});
export default router;

• main.js 修改为

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
createApp(App).use(router).mount('#app')

修改配置

• 在 admin 目录下增加 .eslintrc.js 文件

module.exports = {
   root: true,
   env: {
       node: true
   },
   'extends': [
       'plugin:vue/essential',
       'eslint:recommended'
   ],
   rules: {
       'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       'no-undef': 'off',
       'vue/no-unused-vars': 'off',
       'vue/require-v-for-key': 'off',
       'vue/multi-word-component-names': 0,
   },
   parserOptions: {
       // parser: 'babel-eslint'
   }
};

• 增加配置 lintOnSave: false 如下所示：

  module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false
  })
  

• 启动：npm run serve