vite+vue3+ts 创建一个vue3项目

最近新开了一个项目，要搭建前端，就想着把过程记录下来。

1、创建项目vue3

npm create vite@latest 

yarn create vite

这里看你用的是那个包管理工具

Project name:项目名称自己定义一个

在这里插入图片描述
选择-vue

在这里插入图片描述
选择-ts

在这里插入图片描述

然后就可以了，本地就有建好的项目了

在这里插入图片描述

后面安装的都可以在编辑器终端操作就行，比较方便

2、安装路由： router

 npm install vue-router@4

 yarn add vue-router@4

路由引入

在src下建一个router文件夹，在里面建一个index.ts

import {
    
     createRouter, createWebHistory } from "vue-router";
const router = createRouter({
    
    
  history: createWebHistory(),
  routes: [
   
  ],
  //是否匹配末尾包含反斜杠的路径
  strict: true,
  // 切换页面，滚动到最顶部
  scrollBehavior: () => ({
    
     left: 0, top: 0 }),
});

export default router;

main.ts

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"

const app=createApp(App)
app.mount('#app')
app.use(router);

3、安装pinia

vue3用pinia更好, vue2可以用vuex

 npm install pinia 
 
 yarn add pinia

在src新建一个文件夹：stores ,里面新建文件user.ts (名称按自己喜欢定义就好)

import {
    
     defineStore } from "pinia";

export const useUserInfo = defineStore({
    
    
  id: "userInfo",
  state: () => {
    
    
    return {
    
    
     info:{
    
    }
    };
  },
  getters: {
    
    
   
  },
  actions: {
    
    
    setUserInfo(info:object) {
    
    
      this.info = info;
    },
  },
});

main.ts

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
    
     createPinia } from "pinia";

const app=createApp(App)
app.mount('#app')
app.use(createPinia());

4、安装axios

封装了一个统一的调用的，可以按自己项目需求不同封装。

5、安装:sass

npm add -D sass

6、安装ant-design-vue

看自己用的UI框架是什么安装就好

npm install ant-design-vue --save
 
yarn add ant-design-vue

7、添加依赖项

这看需要添加，（vite首次打开界面加载慢问题/解决）

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

8、安装[unplugin-vue-components]

unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件，使用此插件后，不需要手动编写import { Button } from 'ant-design-vue’这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。

import Components from "unplugin-vue-components/vite";
import {
    
     AntDesignVueResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
    Components({
    
    
      resolvers: [AntDesignVueResolver()],
    }),
  ],

npm install unplugin-vue-components

yarn install unplugin-vue-components

9、安装eslint 和 eslint-plugin-vue

开发中语法管理和规范

10、安装：husky、Commitizen、@commitlint/config-conventional @commitlint/cli

husky 可以防止使用 Git hooks 的一些不好的 commit 或者 push，要求在git commit 之前阻拦不规则代码提交。

npm install husky --save-dev

npm install commitizen -D

npm install --save-dev @commitlint/config-conventional @commitlint/cli

11、打开页面加载进度条：nprogress、@types/nprogress

大家打开一个网页的时候，会看到一个进度条，然后加载完成后进度条就消失了，我们用的最多的就是这几个，NProgress.start()开启进度条，NProgress.done()完成进度条。

npm install nprogress @types/nprogress

差不多这些就够用了，其他的再看看自己的需要安装就好。