vite创建vue3+ts项目

1.使用viet快速搭建项目

npm

• npm init @vitejs/app

yarn

• yarn create @vitejs/app

• 输入项目名称

• 选择框架 + 模板

• 也可以用命令行直接操作

# npm 6.x
npm init @vitejs/app vite-vue3 --template vue-ts

# npm 7+ (需要额外的双横线)
npm init @vitejs/app vite-vue3 -- --template vue-ts

# yarn
yarn create vite my-vue-app --template vue-ts

• 安装依赖

yarn
// 或者
cnpm install

• 启动项目

npm run dev
yarn dev

• 如果需要打印出 IP + port ，use --host，在package.json文件中配置

2.修改 Vite 配置文件

// 位于项目的根路径，项目的全局配置文件，启动时会自动读取该文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'


export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: { // 配置别名
            '@': resolve('./src'),
            'com':resolve('./src/components')
        }
    },
    base:'./', // 打包路径
    server:{
        port:3000, // 服务端口
        open:true, // 启动服务时是否自动打开浏览器
        cors:true, // 允许跨域
    }
})

3.集成路由

• 安装支持vue3的路由（vue-router@4） cnpm install vue-router@4
• 1. 创建 src/router/index.ts 文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/home.vue')
    },
    {
        path: '/',
        redirect: { name: 'Home' }
    }
]

const router = createRouter({
    history:createWebHashHistory(),
    routes
})

export default router

• 入口文件main.ts 文件中挂载

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由文件
import router from './router/index'

createApp(App).use(router).mount('#app')

4.安装Vuex

• 安装支持Vue3的状态管理工具 vuex@next cnpm install vuex@next
• 创建 src/store/index.ts 文件

import { createStore } from 'vuex'

const defaultState = {
    count: 0
}

// Create a new store instance
export default createStore({
    state() {
        return defaultState
    },
    mutations: {
        countAdd(state: typeof defaultState) {
            state.count += 1
        }
    },
    actions: {
        countAdd(context) {
            context.commit('countAdd')
        }
    },
    getters: {
        filterCount(state: typeof defaultState) {
            return 2 * state.count
        }
    }
})

• 和router一样需要在入口文件main.ts 文件中挂载

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由文件
import router from './router/index'
// 引入store文件
import store from './store/index'

createApp(App).use(router).use(store).mount('#app')

5.集成HTTP工具 Axios

• 安装 Axios (跟vue版本无关，安装最新即可) cnpm install axios --save
• 配置 Axios

import axios from 'axios'
import { ElMessage } from 'element-plus'
// 创建axios实例
// 创建请求时可以用的配置选项

const instance = axios.create({
  withCredentials: true,
  timeout: 1000,
  baseURL: ''
})
// axios的全局配置
instance.defaults.headers.post = {
  'Content-Type': 'application/x-www-form-urlencoded'
}
instance.defaults.headers.common = {
  'Auth-Type': 'company-web',
  'X-Requested-With': 'XMLHttpRequest',
  token: 'token_2022_06_19'
}

// 添加请求拦截器(post只能接受字符串类型数据)
instance.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

const errorHandle = (status, other) => {
  switch (status) {
    case 400:
      ElMessage.error('信息校验失败')
      break
    case 401:
      ElMessage.error('认证失败')
      break
    case 403:
      ElMessage.error('token校验失败')
      break
    case 404:
      ElMessage.error('请求的资源不存在')
      break
    default:
      ElMessage.error(other)
      break
  }
}

// 添加响应拦截器
instance.interceptors.response.use(
  // 响应包含以下信息data,status,statusText,headers,config
  (res) => (res.status === 200 ? Promise.resolve(res) : Promise.reject(res)),
  (err) => {
    ElMessage.error(err)
    const { response } = err
    if (response) {
      errorHandle(response.status, response.data)
      return Promise.reject(response)
    }
    ElMessage.error('请求失败')
    return true
  }
)

export default instance

• 使用 Axios

import Http from '@/utils/http'
import { ElMessage } from 'element-plus'
export default {
    mounted () {
        this.getData()
    },
    methods: {
        getData () {
            Http.get('./json/mock.json').then(res => {
                ElMessage.success(res.statusText)
                console.log(res)
            })
        }
    }
}

集成CSS预编译器

• 安装less或者sass,安装到开发环境依赖 cnpm isntall less -D
• 使用

<style lang="less">
div{
    color: #f99;
    span{
        color: #333;
    }
}
</style>