vue3+vite+typescript

1.创建项目

npm init vite@latest <project-name> 
# or
npm init vite-app hello-vue3  
# or 
yarn create vite-app hello-vue3

2. 配置端口号 以及配置别名，解决vue中 引入ref..的插件

配置端口号+配置代理：

打开 vite.config.ts 文件：

  添加server就可以了

  server: {  

     host: '0.0.0.0',

     port: 8080,

     open: true,

     proxy: {

       '/api': {

           target: "http://localhost:3000",

           changeOrigin: true,

           pathRewrite: {

             '^/api': '/api'

           }

        }

     },

  }

配置别名：

  在vite.config.ts文件中引入:
  const path = require('path');

  resolve: {

    alias: {

        '@': path.resolve(__dirname, './src'),

      }

  }

 

下载插件 npm i unplugin-auto-import -D

引入插件 import AutoImport from 'unplugin-auto-import/vite'; // setup语法糖插件 : 解决import { ref , reactive ... } 引入的问题

配置： 

    import vue from '@vitejs/plugin-vue';

    plugins: [ vue(),

     //配置插件

     AutoImport({ imports:['vue','vue-router'] })

    ],

3. 安装路由

npm install vue-router@4 -S

创建router文件夹并建index.js文件：
import { createRouter, createWebHistory } from "vue-router"; 
import Home from "../views/Home.vue"; 
const routes = [ 
  { path: "/", name: "Home", component: Home, }, 
  { 
    path: "/about", 
    name: "About", 
    component: () => 
    import(/* webpackChunkName: "about" */ "../views/About.vue"), 
  }, 
]; 
const router = createRouter({ 
  history: createWebHistory(), 
  routes,
}); 
export default router;

main.js文件中引入 router 文件并挂载router即可。
  例如：
      import router from "./router"; 
      createApp(App).use(router).mount('#app')

4.vscode安装插件

在 vscode 编辑器中安装vue3扩展：
　　禁用 vetur 插件
　　安装 vue language features(volar) 插件
　　安装 element ui snippets 插件

5.安装Pinia

安装下载：
   yarn add pinia 
   or
   npm install pinia
main.js文件引入：

     import store from './store'

     并use store即可。

 新建store文件夹，然后创建index.js文件：

     import {createPinia} from 'pinia';
     import piniaPluginPersist from 'pinia-plugin-persist'; //这个插件是用来做持久化存储的
     const store = createPinia();
     store.use(piniaPluginPersist);


     export default store;
 
  开始使用，例如创建一个user.js文件：

  import {defineStore} from 'pinia';
  export const useUserStore = defineStore({
    id: 'user',
    state:()=>{
        return {
            token: ''
        }
    },
    getters: {}, //这个跟vuex作用是差不多一样
    actions: {
        setToken(token){
            this.token = token;
        }
    },
    persist:{
        enabled: true,
        strategies: [{
            key: '这里是存储的名字，可以自定义，例如 user_data',
            storage: localStorage,
            paths: [], //通过 paths 指定要长久化的字段，其余的则不会进行长久化。
        }]
    }
  })
 
  使用方式：
  在需要store的文件中引入对应的js文件即可，例如：
  login.vue:

    import { useUserStore } from '@/store/user'
    const userStore = useUserStore();   // 注意这里也可以引入 storeToRefs 方法，然后进行解构，storeToRefs方法是pinia里面的，所以是从pinia中引入。
    //登录方法中调用存储token的方法
    login(){
       //假设这里获取到了用户token，然后需要存储token
       let token = 'xx';
       useUserStore.setToken(token);
    }
 
注意事项：
    1.Pinia不需要像Vuex一样使用modules分模块，Pinia可在store目录中直接定义对应模块就可以了。
 
pinia与vuex区别：

支持选项式api和组合式api写法
pinia没有mutations，只有：state、getters、actions
pinia分模块不需要modules（之前vuex分模块需要modules）
TypeScript支持很好
自动化代码拆分
pinia体积更小（性能更好）

6.安装eslint以及css预处理器sass安装

1. ts中使用 @ 符号引入， 需要在tsconfig.json文件中进行配置
   skipLibCheck: true

   "exclude": ["node_modules"]

2.安装eslint
  npm install --save-dev eslint eslint-plugin-vue

3.创建 .eslintrc.js 文件

    module.exports = {

    　　root: true,

    　　parseOptions: {

        　　sourceType: 'module'

    　　},

    　　parser: 'vue-eslint-parser',

    　　extends: [

          'plugin:vue/vue3-essential',

          'plugin:vue/vue3-strongly-recommended',

          'plugin:vue/vue3-recommended'

    　　],

   　　 env: {

          browser: true,

          node: true,

          es6: true,

    　　},

    　　rules: {

         'no-console': 'off',

         'comma-dangle': [2, 'never']

    　　}

    }

安装sass:
npm install -D sass sass-loader

7. 安装 element-plus

npm install element-plus --save

然后再 main.ts 文件中引入

　　import ElementPlus from 'element-plus'

　　import 'element-plus/dist/index.css'

 

   app.use(ElementPlus) 即可;

8.vue3语法

setup 语法糖中，组件的使用方式：
   引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，他会自动以文件名为主，不用再写name属性了。

ref使用：
   定义： const xxx = ref('xx');
   作用： 定义一个响应式的数据。
   js中操作，需要使用 xxx.value;
   模板中使用不需要 .value;

 9. 兄弟组件bus.js传值

新建一个Bus.js来用于兄弟之间传值。

Bus.js文件：

import Vue from 'vue';
export default new Vue;

通过bus.$emit("事件名称”,data) 发送

通过bus.$on("事件名称"，(data)=>{

  this. data = data 

})接收

10.axios二次封装以及api解耦

下载安装axios: npm install axios -S
新建utils/request.js:
  import axios from 'axios'; 
  //1. 创建axios对象 
  const service = axios.create({
     baseURL: import.meta.env.VITE_BASE_URL,
     timeout: 5000
  }); 
  //2. 请求拦截器 
  service.interceptors.request.use(config => { 
    return config; 
  }, error => { 
    Promise.reject(error); 
  });
   //3. 响应拦截器 
   service.interceptors.response.use(response => { 
   //判断code码 
    return response.data; 
   },error => { 
    return Promise.reject(error); 
  }); 
  export default service;

api解耦文件：
创建api文件：
import request from '@/utils/request' 
export function testApi( data ){ 
   return request({ 
      url:'/api/xxx', 
      method:"post", 
      data 
   }) 
}