vue建项目要做的事（总结）

1、建项：输入vue create vue@latest，这是vue官方推荐的写法，接下来按提示输入项目信息。到项目目录下，需要输入npm install安装所有依赖
点击跳转到vue官方的快速上手
https://www.cnblogs.com/twinkler/p/18099646

2、常用依赖：

• vite：npm install sass
• npm install -D sass-loader sass   vue官方推荐

//  vue.config.js
//  main.ts中：import './style/index.scss'
//  其它地方记得不要写错，index.scss里的变量名不要写错！！！

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
      loaderOptions: {
        scss: {
          additionalData: `@import "~@/style/variable.scss";`,
        }
    }
  },
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  }
})

//  vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/style/index.scss";`
      }
    }
  }
})

• npm install echarts

• npm install lodash // lodash是一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数（包括防抖的处理）

• npm install echarts-liquidfill // 水球图

• npm install axios

• npm install element-plus

//main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
const app = createApp(App);
app.use(ElementPlus, {
  locale: zhCn  //  国际化
})

• npm i --save ant-design-vue@4.x            ant-design

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';
const app = createApp(App);
app.use(Antd).mount('#app');

• npm install pinia            点此跳转

import { createPinia } from 'pinia'
const pinia = createPinia();
app.use(pinia);

• npm install vue-router            点此跳转

import router from '@/router'
app.use(router)

// @/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
 
const router = createRouter({
    history: createWebHistory(),    //  路由器的工作模式
    routes: [   //  路由规则
        {
            path: '/',
            redirect: '/login',
        },
        {
            path: '/:catchAll(.*)',
            redirect: '/notfound/',
        },
        {
            path: '/home',
            name: 'home',
            component: HomeView
        },
    ]
})
export default router

App.vue要添加：

<router-view />

[Vue Router warn]: No match found for location with path "/"
这个警告是你没有配置 ‘/’ 对应的路径

  {
    path: '/',
    component: Home, // 你的组件
  },