搭建vue3+ts+less+vite项目

bigHead-

已于 2024-01-10 17:15:16 修改

阅读量4.5k

点赞数 3

分类专栏： Vue 文章标签： vue 前端

于 2022-03-22 14:52:11 首次发布

本文链接：https://blog.csdn.net/weixin_47872719/article/details/123658131

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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 vue-router@4.0.1

// 查看历史版本
// 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<RouteRecordRaw> = [
    {
        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
<template>
  <div class="body">
    <router-view />
  </div>
</template>

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中的方法

<script setup lang="ts">
import { useStore } from 'vuex'
const store = useStore()
store.commit('setName', '张三')
</script>

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script >
    <script src="/config.js"></script>   // config.js 配置文件需要在index.html中引用
  </body>
</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}

用法

<script setup lang="ts">
import { onMounted } from 'vue';
import { getActivityTmpCategory } from '../../utils/http'
onMounted(() => {
    // 请求活动模板树
    getActivityTmpCategory({ type: 2 }).then((res: any) => {
        console.log(res);
    })
})
</script>

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中定义变量并使用

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

// assets/global.css

:root {
  --btnColor: #03e0ff;
  --boxBackgroundColor: #0b1228;
  --borderColor: #3d4a5e;
  --modalColor: #0b2035;
}

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

<style lang='less' scoped>
	ul {
	    height: calc(100% - 25px - 70px);
	    list-style: none;
	    padding: 0 5px;
	    margin-top: 10px;
	    overflow-y: scroll;
	    border-bottom: 1px solid var(--borderColor);   // 在 .vue文件中的style 中使用
	    :hover {
	      background-color: var(--btnColor);
	    }
	
	    li {
	      padding: 5px 5px;
	      border-bottom: 1px solid var(--borderColor);   // 在 .vue文件中的style 中使用：
	      border-radius: 2px;
	      cursor: pointer;
	      height: 70px;
	
	      .titleTop {
	        justify-content: space-between;
	        height: 30px;
	      }
	    }
	
	    .color {
	      background-color: var(--btnColor);
	    }
	  }
</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的项目便搭建完毕。

bigHead-

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
搭建vue3+ts+less+vite项目

1. 创建项目首先用Vite工具创建Vue3+Typescript的项目环境注意：Vite需要你的Nodejs版本>=12.0.0// yarn 方式yarn create @vitejs/app v3-ts --template vue-tscd v3-tsyarnyarn dev// npm npm init @vitejs/app v3-ts --template vue-tscd v3-tsnpm install npm run dev2. 添加lessy
复制链接

扫一扫