使用Vite创建

在执行以下命令前，请确保安装了Nodejs.若是还想更多详情配置可查看vite官方文档

npm create vite@latest

推荐在项目中使用TypeScript，这会使你的项目更易维护，以及减少开发时产生的不必要bug.

// 创建项目的名字 
// √ Project name: ... vue_temp
// 框架的选择
// √ Select a framework: » Vue
// 语言的选择
// √ Select a variant: » TypeScript

目录结构

创建完成后，可能没有以下一些文件夹，需要自己根据以下目录结构创建。

ps：这是习惯常用的结构，当然你们也可以按照自己习惯的来。

vue_temp   项目名字
├── node_modules  模块依赖
├── public   静态资源打包不会处理，放至同级
│   └── vite.svg
├── src 
│   ├── assets  静态资源
│   ├── common  公共方法
│   ├── views  视图
│   ├── router  路由
│   │   ├── index.ts
│   │   └── routes.ts
│   ├── store  状态管理
│   │   ├── index.ts
│   │   └── user.ts
│   ├── styles  样式
│   ├── utils  工具函数
│   ├── components 公共组件
│   ├── App.vue  开始视图文件
│   ├── main.ts  开始逻辑文件
├── index.html  入口文件
├── package.json
├── .env.development 开发环境配置
├── .env.production 生产环境配置
├── .gitignore git忽略文件
├── tsconfig.json ts配置文件
├── vite.config.ts 打包配置
└── README.md

配置

现在项目缺少几个重要组成部分：store存储、axios请求、router路由等。

1.Router路由

主要用于控制页面跳转、以及相关权限校验。

npm install vue-router

// 文件： ./store/routes.ts
// 用于单独配置路由表信息
import { RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        // 路由不能重复且唯一
        path: '/',
        // 名称不能重复且唯一
        name: 'admin',
        // 元信息，可用于路由权限校验设置，比如哪些页面需要校验权限，或者需要什么权限都可以在该对象中添加想要的属性设置。
        meta: {
            title: '首页',
            flag:true
        },
        // 视图指向
        component: () => import('@/views/admin/index.vue'),
    }
]

export default routes


// 文件： ./store/index.ts
// 创建路由
import { createRouter, createWebHistory } from 'vue-router'
// 获取配置的路由表
import routes from './routes'
const router = createRouter({
  history: createWebHistory(),
  routes
})
// 路由守卫拦截
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    // 此处就可以权限校验，这是全局拦截
  }
  next()
})
export default router

2.Store存储

用于公共的存储响应式数据、其原本使用的事vuex来实现。

但是vuex有个致命的缺点就是，刷新后数据会丢失，所以后面项目中基本使用pinia来完成。

其优点事结合响应式和持久化存储。

npm install pinia

// 文件路径 ./store/index.ts
// 创建pinia
import { createPinia } from 'pinia'

// 持久化处理
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)

export default pinia

// 文件路径 ./store/user.ts
// 创建user模块
import { defineStore } from 'pinia'
import { ref } from 'vue'

// 定义userStore模块
export const useUserStore = defineStore('user',()=>{
    // 定义响应式数据
    const name = ref('mao')
    // 定义方法
    const setName = (name:string)=>{
        name.value = name
    }
    return {
        name,
        setName
    }
})

// vue文件使用示例
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
userStore.name
userStore.setName('mao')

3.注册插件

在项目中，有些插件或者工具需要注册后才能使用，比如pinia和router。

// 文件路径 ./main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './store/index'
// 引入存储
import pinia from './store/index'

const app = createApp(App)
// 注册router使用
app.use(router)
// 注册sotre使用
app.use(pinia)
app.mount('#app')

4.配置vite.config.ts

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

// https://vitejs.cn/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置引入别名方便打包时候识别
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

5.配置tsconfig.json

具体其他配置请看tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "baseUrl": ".",
    //在vite.config.ts配置后这里一定要配置，否则无法识别。 
    "paths": {
      "@/*": ["src/*"]
        },
    }
    // .....
}

6.配置环境变量

.env.development 和 .env.production这两个文件主要是配置开发环境变量和生成环境变量

注意：vite搭建的项目一定要以 VITE_ 开头

# 公共环境
# .env
VITE_APP_TITLE = 'mao'

# 开发环境
# .env.development
VITE_BASE_URL = 'http://localhost:3000'

# 生产环境
# .env.production
VITE_BASE_URL = 'http://localhost:3000'

总结

以上是项目初始化的基本配置，后续会继续补充。