首先用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
yarn add less less-loader --dev
// npm
npm install less less-loader --save-dev
注意:这边如果不加–dev,包会安装到dependencies中,这样会导致编译不通过。需要将less和less-loader迁移到devDependencies中再重新执行yarn安装。
先把项目里面的东西清理一下,把官方demo删除(HelloWorld 组件相关的全部删除)。在项目中创建几个常用的文件夹,目录结构大致如下(大家可以先创建views文件夹,其他的后续会陆续创建):
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
按照官网提供安装步骤进行就好
# 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')
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
中的方法
npm install axios --save
// yarn
yarn add axios
在
config.js
文件配置全局请求路径,这样的好处是项目打包后可以通过修改config.js文件中的路径来更改项目的请求路径// public/config.js
window.g = {
BASEURL: 'http://127.0.0.1:8000',
}
// index.html
Vite App
// 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}
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')
:root
文档的根元素,这是一个放自定义属性的好地方,因为我们可以根据其他个别特别的样式的选择性来覆盖自定义属性// assets/global.css
:root {
--btnColor: #03e0ff;
--boxBackgroundColor: #0b1228;
--borderColor: #3d4a5e;
--modalColor: #0b2035;
}
.vue
文件中的style 中使用
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的项目便搭建完毕。