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>

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

1.项目创建

2.选择构建依赖

3.插件安装

4.eslint 预制配置

5.props 进行解构响应

6.注册组件提供 declare module

6.安装less或sess

7.统一设置样式

8. script name

8.接口封装

猜你喜欢

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

1.项目创建

2.选择构建依赖

3.插件安装

4.eslint 预制配置

5.props 进行解构响应

6.注册组件 提供 declare module

6.安装less或sess

7.统一设置样式

8. script name

8.接口封装

猜你喜欢

6.注册组件提供 declare module