vite+vue3+ts 创建vue3项目

vite+vue3+ts 创建vue3项目

1.打开cmd 输入下面命令后，输入项目名称，选择vue和TypeScript后，可以创建完文件，如图二显示。

npm create vite@latest

2.用vscode打开项目，安装less/scss （二者选其一）

npm add -D less

npm add -D sass 

npm uninstall --save less-loader //删除less

3.自动导入，使用之后不需要再进行引入vue中hook reactive ref

npm install -D unplugin-vue-components unplugin-auto-import

在vite.config.ts文件中：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
//element
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  plugins: [
    vue(),
 
    //element按需导入
    AutoImport({
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
      //element
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //element
      resolvers: [ElementPlusResolver()],
      //默认存放位置
      //dts: "src/components.d.ts",
    }),
  ],
 
})

4.安装router

 npm install vue-router@4 

5.在src文件夹下新建一个router文件，里面再新建一个index.ts文件，内容如下：

import { createRouter, createWebHistory } from "vue-router";
 
 
let routes= [
    {
        path: '/',
        name: 'home',
        //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
        component: () => import('xxxx')
    },
    //{
        //配置404页面
        //path: '/:catchAll(.*)',
        //name: '404',
        //component: () => import(''),
    //}
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})
// 导出
export default router 

6.在main.ts文件中引入：

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

7.安装pinia

参考链接：https://blog.csdn.net/weixin_59916662/article/details/127331094