使用Vite初始化Vue3项目

版本信息：

Vite:4.3.2

Vue:3.2.47

pinia:2.0.35

vie-router:4.1.6

开始初始化

        由于使用脚手架创建Vite项目的时候很多 配置 第三方包等都没有自动地加上，所以得手动加上。那在这里做个记录。—— 2023.4.30

1.创建Vite项目

npm create vite

2.新建一个Vite项目好了之后 安装node_modules

npm i

3.配置vite.config.ts文件 和 tsconfig.json

1.运行后只有localhost的地址所以还要再添加一个ip地址访问（也可以不用）

2.添加@路径访问src文件夹 那这样就可以使用@来访问src文件了

        2.1 需安装path node第三方库    

npm i path
npm i @types/node -D

        2.2 在tsconfig.json文件中的 compilerOptions 添加一个paths属性

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

export default defineConfig({
  plugins: [vue()],
  server:{
    host:"0.0.0.0",
    hmr:true, 
  }, //1.运行后 添加ip地址访问项目 不然只有一个localhost地址访问
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  } //2.需要安装path  才可以添加@路径访问src文件夹 另外还需要安装node 不然dirname会有红色横线
})

//tsconfig.json
{
   "compilerOptions": {
    /*  .....(其他属性就不写了) */
    /* 使用@访问src文件 */
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "skipLibCheck": true  
  },
  /*  .....(其他属性就不写了 这里就简单的添加一下基础的配置) */
  "exclude": ["node_modules", "dist", "**/*.js"],  
}

4.安装其他第三方库

vue-router、sass、pinia、axios。。。。（按照自己的需求来安装就行 这里就列举了几个）

5.按照自己的习惯新建src中的文件夹 

6.创建router路由

// 在src文件夹下新建一个router的文件夹 里面创建一个index,ts文件 输入代码
//============ index.ts文件 ==============
import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

export const routes:RouteRecordRaw[] = [
  {
    path:'/',
    redirect:'/home' //重定向
  },
  {
    path:'/home',
    name:'',
    component:()=>import('@/views/HomeView/index.vue'),
  }
]

/* 创建路由 */
const router = createRouter({
  history:createWebHashHistory(),
  routes,
  scrollBehavior:() => ({left:0,top:0})
})

export default router;

//============ main.ts文件 ==============
//在main.ts文件中引入router (其他代码省略)
import router from '@/router'
app.use(router)

7.创建pinia

//在src文件夹下创建store文件夹 里面创建一个index,ts文件和modules文件夹
//modules文件夹存储其他模块的状态信息

//============= index.ts ===============
import {createPinia} from 'pinia'
const store = createPinia()
export default store

//============= main.ts ===============
//总的main.ts中引入store
import store from '@/store'
app.use(store)

 8.整个项目就基本上配置 完成了

注：图中的Netword地址是因为添加了server（就是第三步中的第一点），才会显示这个地址

我也是在学习中，如果有什么错误可在评论区说一声