1.创建项目

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': { 
"http://localhost:3000", 
true, 
           pathRewrite: { 
'/api' 
           } 
        } 
     }, 
  }

配置别名：

  在vite.config.ts文件中引入:

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(),
     //配置插件 
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区别：

  1. 支持选项式api和组合式api写法
  2. pinia没有mutations，只有：state、getters、actions
  3. pinia分模块不需要modules（之前vuex分模块需要modules）
  4. TypeScript支持很好
  5. 自动化代码拆分
  6. 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 
   }) 
}