vue3+vite+typescript

土家陈祠坊咸菜 · 發表於 2022-9-21 11:17:00

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 
   }) 
}

vue3+vite+typescript

瀏覽過的版塊