搭建vue3+ts+less+vite项目

1. 创建项目

首先用Vite工具创建Vue3+Typescript的项目环境

注意：Vite需要你的Nodejs版本>=12.0.0

// yarn 方式
yarn create @vitejs/app v3-ts --template vue-ts
cd v3-ts
yarn
yarn dev

// npm 
npm init @vitejs/app v3-ts --template vue-ts
cd v3-ts
npm install 
npm run dev

2. 添加less

yarn add less less-loader --dev

// npm
npm install less less-loader --save-dev

注意：这边如果不加–dev，包会安装到dependencies中，这样会导致编译不通过。需要将less和less-loader迁移到devDependencies中再重新执行yarn安装。

3. 完善目录结构

先把项目里面的东西清理一下，把官方demo删除（HelloWorld 组件相关的全部删除）。在项目中创建几个常用的文件夹，目录结构大致如下（大家可以先创建views文件夹，其他的后续会陆续创建）：

4. 添加 vue-router

yarn add [email protected]

// 查看历史版本
// npm(yarn) info vue-router versions

注意避雷：建议大家不要使用4.0.0版本。
vue-router的4.x版本中引入的不再是一个类了，而是一组功能。我们通过createRouter创建路由。

• 在router/index.ts中通过创建路由并导出。

// index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from "../views/Home/index.vue";
const routes: Array = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/resourceManager',
        name: 'ResourceManager',
        component: () => import('../views/ResourceManager/index.vue'),
    },
    {
        path: '/taskManagement',
        name: 'TaskManagement',
        component: () => import('../views/TaskManagement/index.vue'),
    },
];

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

export default router;

• 在main.ts中引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

• 最后在App.vue中设置视图窗口

// App.vue

5. 添加Element Plus组件库

按照官网提供安装步骤进行就好

# Yarn
$ yarn add element-plus

# NPM
$ npm install element-plus --save

完整引入

如果对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'  
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementPlus).mount('#app')

如需要按需引入，请参照官网示例

6. 添加Vuex@next

npm install vuex@next --save

// yarn
yarn add vuex@next --save

• 新建store/index.ts

import { createStore } from 'vuex';

interface StateType {
  name: string;
  time: string;
}
const defaultState: StateType = {
  name: '',
  time:''
};

export default createStore({
  state() {
    return defaultState;
  },
  mutations: {
    setName(state: typeof defaultState, data) {
      return (state.name= data);
    },
    setTime(state: typeof defaultState, data) {
      return (state.time= data);
    },
  },
  actions: {},
  getters: {},
});

• 在main.ts中引入vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import store from './store/index'  // 引入vuex
createApp(App).use(router).use(ElementPlus).use(store).mount('#app')

• 页面中调用Vuex中的方法

7. 添加axios

npm install axios --save

// yarn
yarn add axios
在

• puclic目录下新增config.js文件配置全局请求路径，这样的好处是项目打包后可以通过修改config.js文件中的路径来更改项目的请求路径

// public/config.js
window.g = {
    BASEURL: 'http://127.0.0.1:8000',
}

// index.html


  
    
    
    
    
  
  
    

    
       // config.js 配置文件需要在index.html中引用
  

• 简单封装一下axios请求

//  utils/http.ts
import axios from 'axios'

const baseUrl = () => {
    return (window as any).g.BASEURL
}

// 执行ajax-get请求的函数
const getRequest = (url:string, params?:object) => {
    return new Promise((resolve, reject) => {
        axios.get(url, {params}).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}


// 执行ajax-post请求的函数
const postRequest = (url:string, params:object) => {
    return new Promise((resolve, reject) => {
        axios.post(url, params).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

// 活动模板类别树
const getActivityTmpCategory = (params:object) => {
    return postRequest( `${baseUrl()}/api/activityTmpCategory/tree`, params)
}

export {getActivityTmpCategory}

• 用法

8. 添加全局样式文件

• src/assets目录下添加global.css文件，在main.ts中引入该文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/global.css'  // 引入全局样式文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import store from './store/index'

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

• css中定义变量并使用
  1. 变量声明, :root 文档的根元素，这是一个放自定义属性的好地方，因为我们可以根据其他个别特别的样式的选择性来覆盖自定义属性

  // assets/global.css
  
  :root {
    --btnColor: #03e0ff;
    --boxBackgroundColor: #0b1228;
    --borderColor: #3d4a5e;
    --modalColor: #0b2035;
  }
  

  2. 使用：在.vue文件中的style 中使用

  9. vite.config.ts配置

  这边顺便给大家列一下vite.config.ts的常见配置,vite.config.js的配置也大致一样，详情可以跳官网参考配置：

export default defineConfig({
  plugins: [vue()],
  // 项目根目录，可以是绝对路径也可以是相对配置文件所在的路径
  root?: '',
  // 避免打包访问后空白页面， 要加上， 不然线上也访问不了
  base:'./',  
  // 运行编译模式 'development' || 'production' 
  mode?: 'development' , 
  // 路径别名
  resolve:{
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  // 全局定义变量替换
  define?:{
    '':''
  },
  // build选项
  build?:{
    base:'/', // 基础路径
    target:'modules', // 浏览器兼容模块
    outDir:'dist', // 输出路径
    assetsDir:'assets', // 静态资源路径
    cssCodeSplit: true, //css代码拆分,禁用则所有样式保存在一个css里面
    sourcemap: false, //是否构建source map 文件
    terserOptions: {
      // 生产环境移除console
      compress: {
        drop_console: true,
      },
    },
  },
   // 依赖优化项
  optimizeDeps?:{
    ...
  },
  // 开发服务器
  server: {
    host: '', //主机
    open: false,//是否在浏览器自动打开
    port: 4000,// 端口
    https: true, // 是否开启 https
    proxy: {
      '/api': {
        target: '',	//实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    },
    cors: true
  },
})

OK～至此一个vue3的项目便搭建完毕。