版本信息:
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(就是第三步中的第一点),才会显示这个地址