vite+vue3+ts 项目初始化操作

Posted 2023-02-16 奥特曼　

1.项目创建

pnpm create vue
# or
npm init vue@latest
# or
yarn create vue
#or
npm create vue@3
#or
npm create vue@2 // 创建vue2项目 更好的支持ie11

// 经常使用
npm init vue@latest
#or
pnpm create vue@latest

create vue是vite +Vue项目的脚手架工具 

2.选择构建依赖

✔ Project name: … vue-project
✔ Add TypeScript? … No / `Yes`  //添加typescript
✔ Add JSX Support? … `No` / Yes  // 添加JSX支持
✔ Add Vue Router for Single Page Application development? … No / `Yes`// 添加vueRouter
✔ Add Pinia for state management? … No / `Yes`  // 为状态管理添加Pinia
✔ Add Vitest for Unit Testing? … `No` / Yes     // 为单元测试添加Vitest
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes //为单元和端到端测试添加Cypress
✔ Add ESLint for code quality? … No / `Yes` // 添加ESLint以提高代码质量
✔ Add Prettier for code formatting? … No / `Yes` //为代码格式添加Pretier

3.插件安装

必装：

• Vue Language Features (Volar) vue3语法支持
• TypeScript Vue Plugin (Volar) vue3项目ts支持
• Eslint 代码风格校验

4.eslint 预制配置

.eslintrc.cjs中添加：

格式：单引号，没有分号，行宽度100字符，没有对象数组最后一个逗号

vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的

  rules: 
    'prettier/prettier': [
      'warn',
      
        singleQuote: true,
        semi: false,
        printWidth: 100,
        trailingComma: 'none'
      
    ],
    'vue/multi-word-component-names': [
      'warn',
      
        ignores: ['index']
      
    ],
    'vue/no-setup-props-destructure': ['off']
  

vscode 开启 eslint 自动修复

 "editor.codeActionsOnSave": 
        "source.fixAll": true,
    ,

5.props 进行解构响应 

允许对父传子 props 进行解构，我们会开启解构保持响应式的语法糖

// vite.config.js
export default 
  plugins: [
    vue(
      reactivityTransform: true
    )
  ]

6.注册组件 提供 declare module

import CpNavBar from '@/components/CpNavBar.vue'
 
declare module 'vue' 
  interface GlobalComponents 
    CpNavBar: typeof CpNavBar
    // 可以写入多个
  

6.安装less或sess

项目使用less预处理器，安装less，即可支持less语法：

pnpm i less -D

定义变量

// 主题
@mainColor: #000000;
// 辅助
@helpColor: #000000;
// 成功
@sucColor: #000000;
// 警告
@warnColor: #000000;

mixin.less 

.hoverShadow (@y: -3px) 
    transition: all 0.5s;
    &:hover 
        transform: translate3d(0, @y, 0);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    

 引入局部代码

<style lang="less" scoped>
   @import '@/assets/styles/variables.less';
    @import '@/assets/styles/mixins.less';
    h1 
        background-color: @warnColor;
        .hoverShadow(-20px);
    
</style>

 全局引入 vue.config.js

export default defineConfig(
    css: 
        preprocessorOptions: 
            less: 
                additionalData: `
                    @import "@/assets/styles/variables.less";
                    @import "@/assets/styles/mixins.less";
                `,
            ,
        ,
    ,
)

7.统一设置样式

1.安装 normalize.css

pnpm i normalize.css

2.使用 `normalize.css`，`main.ts`

import  createApp  from 'Vue'
import App from './App.Vue'
import 'normalize.css'
createApp(App).mount('#app')

8. script name

在vue2中我们都是通过 name属性直接设置了，所以说下vue3怎么使用

1.第 1 种方法，

<script>
    export default 
        name: 'Layout',
    
</script>
<script lang="ts" setup name="Layout"></script>
<template>
    <div>顶部</div>
    <div>导航</div>
    <div>路由出口</div>
    <div>底部</div>
</template>

2.第二种方法

pnpm i  vite-plugin-vue-setup-extend -D

 配置 vite.config.js。

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig(
    plugins: [vue(), vueSetupExtend()],
)

<script lang="ts" setup name="Category">

 注意：作为路由组件适应时，script 标签内部要写点内容（注释也行），script name 才能生效。

8.接口封装

utils/request.ts  

import axios,type Method from 'axios'
import  Toast  from 'vant';

const baseURL = 'xxx'
export const instance = axios.create(
  baseURL
)
import useUserStore from '@/stores/index'
import useRouter from 'vue-router'
const router = useRouter()


// 添加请求拦截器
instance.interceptors.request.use(function (config) 
  // 在发送请求之前做些什么
  // config.headers['token'] = 'token' || ''
  const store = useUserStore()

  if (config.headers && store.user?.token) 
    config.headers['authorization'] = `Bearer $store.user?.token`

  
  return config;
, function (error) 
  // 对请求错误做些什么
  return Promise.reject(error);
);


// 添加响应拦截器
instance.interceptors.response.use(function (response) 
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  if (response.data.code != '10000') 
    Toast(response.data.message)
    return Promise.reject(response.data.message)  
  

  return response.data;
, function (error) 
  console.log('错误信息',error);


  if (error.response.data.code == '401')  
    // console.log('401了');
    const store = useUserStore()
    Toast('登录失效，请重新登录')
    store.delUser()
    router.push('/login')

  
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
);



// 固定格式 
type Data<T> = 
  code: string
  message: string
  data: T


// 请求工具函数
const request = <T>(url:string, method:Method='get', submitData:object) => 
  // 负责发请求：请求地址，请求方式，提交的数据
  return instance.request<T,Data<T>>(
    url,
    method,
    // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
    // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
    // [] 设置一个动态的key, 写js表达式，js表达式的执行结果当作KEY
    // method参数：get,Get,GET  转换成小写再来判断
    // 在对象，['params']:submitData ===== params:submitData 这样理解
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  )


export baseURL,request

api/home.ts 二次封装

import type  , listRseponse  from '@/type/home'

import  request  from '../utils/request'

// 获取首页
export const getHomeList = (data: pageData) => request<listRseponse>('patient/home/knowledge', 'get', data)

index.vue  调用接口

<script setup lang="ts">
import  getHomeList  from '@/api/home'
const onLoad = async () => 
  finished.value=false
  // 异步更新数据
  const res = await getHomeList( current: page.value, pageSize: 10, type: props.type )
  allTotal.value = res.data.total
  list.value.push(...res.data.rows);
  page.value++
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    loading.value = false;

    // 数据全部加载完成
    // if (list.value.length >= allTotal.value) 
    if (list.value.length >= allTotal.value) 
      finished.value = true;
    
;
</script>