一个新的Vue项目要如何配置好呢?
初始化项目
打开放项目的文件夹,按住shift + 鼠标右击,选择在此处打开Powershell窗口
安装项目: npm create vue
- 输入项目名称
- 选择需要的配置
项目构建完成,输入 cd 项目名
如果是用vscode编辑器的话,输入 code .
, 此时就能打开vscode定位到此项目目录,此时可以把Prowershell窗口关掉了
选择上方 终端 => 新建终端
安装依赖: npm install
启动项目: npm run dev
配置环境变量
在实际项目中,一般会有三种环境:开发环境,测试环境,生产环境,每个环境下可能都会有不一样的配置,地址等
原理可参考另一篇文章 vue的环境变量的配置
因为有时候 process.env.NODE_ENV
运行时的值感觉都是 development, 为了确保准确,我们自己配置它
安装 跨平台的cross-env
- 安装
css
npm install --save-dev cross-env
- 修改 package.json文件
json
"scripts": {
"dev": "cross-env NODE_ENV=development vite --mode development",
"build": "cross-env NODE_ENV=production vite build --mode production"
},
添加 .env 文件
在根目录创建了.env.production文件和.env.development文件
-
.env.production 文件
- 配置接口的根路径
ini
VITE_APP_BASE_API= 'http://ceshi13.xxxxx.cn'
-
.env.development 文件
- 配置接口的根路径
- 因为等下要设置 本地跨域的接口代理,所以设置为
/api
ini
VITE_APP_BASE_API= '/api'
调用的时候是: import.meta.env.VITE_APP_BASE_API
修改 Vite 配置文件
Vite 配置文件 vite.config.ts
位于根目录下,项目启动时会自动读取。
本项目先做一些简单配置,例如:设置 @
指向 src
目录、 服务启动端口、打包路径、代理等。
关于 Vite 更多配置项及用法,请查看 Vite 官网 vitejs.dev/config/ 。
javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
import path from "path"
console.log('模式', process.env.NODE_ENV);
// https://vitejs.dev/config/
export default defineConfig({
base: process.env.NODE_ENV === 'production' ? './' : '/',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
//或
// "~": path.resolve(__dirname, 'src')
}
},
server: {
// 跨域代理
proxy: {
'/api': {
target: 'http://ceshi13.xxxx.cn',
// 改变请求的origin为target的值
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
// 启动项目时自动打开浏览器
open: true
},
plugins: [
vue(),
],
})
下载一些常用的依赖及使用
sass
- 安装
css
npm i -D sass
windicss
- 安装
css
npm i -D vite-plugin-windicss windicss
-
使用
在你的 Vite 配置中添加插件:vite.config.js
javascriptimport WindiCSS from 'vite-plugin-windicss' export default { plugins: [ WindiCSS(), ], }
最后,在你的 Vite 入口文件中导入
virtual:windi.css
:main.js
arduinoimport 'virtual:windi.css'
VueUse里的useCookies
- VueUse是一个使用vue的使用工具库,useCookies是设置token时候用的
- 安装
less
// 包装器
npm i @vueuse/integrations
npm i universal-cookie
-
使用
创建 src/utils/auth.js 文件
jsimport { useCookies } from '@vueuse/integrations/useCookies' const TokenKey = "admin-token" const cookie = useCookies() // 获取token export function getToken() { return cookie.get(TokenKey) } // 设置token export function setToken(token) { return cookie.set(TokenKey, token) } // 清除token export function removeToken() { return cookie.remove(TokenKey) }
-
调用
xml<script setup> import { setToken } from '@/urils/auth' setToken('123') </script>
nprogress
-
nprogress 页面跳转的进度条
-
安装
npm install nprogress
-
使用
创建 src/utils/useNprogress.js 文件
jsimport nProgress from "nprogress"; // 显示全屏 loading export function showFullLoading() { nProgress.start() } // 隐藏全屏 loading export function hideFullLoading() { nProgress.done() }
-
调用:在全局守卫里面调用
创建 src/permission.js
每当路由跳转的时候调用,这里顺便判断是否登录
jsimport router from './router' import { getToken } from '@/util/auth.js' import { showFullLoading, hideFullLoading } from '@/util/useNprogress.js' // 全局前置守卫 router.beforeEach((to, from, next) => { // 显示loading showFullLoading() // 获取token const token = getToken() if (!token && to.path != '/login') { // 弹个警告: 请先登录 return next({ path: '/login' }) } if (token && to.path == '/login') { // 弹个警告: 请勿重复登录 return next({ path: from.path ? from.path : '/' }) } // .... next() }) // 全局后置守卫 router.afterEach((to, from) => { // 隐藏 loading hideFullLoading() })
在main.js中导入nprogress的样式和 permission.js
main.js
arduino// 导入路由全局守卫 import 'nprogress/nprogress.css' import './permission.js'
vuex
- 安装
css
npm i vuex
-
使用
src/store/index.js
javascriptimport { createStore } from 'vuex' const store = createStore({ modules: {}, state: () => { return { // 用户数据 // user: null } }, getters: { // user: state => state.user || {}, }, mutations: { // 记录用户信息 // SET_USERINFO(state, user) { // state.user = user // }, }, actions: {} }) export default store
如果想要分模块,那就在store下建个modules文件夹
src/store/modeules/user.js
javascriptexport default { state: () => { return { // 用户数据 // user: null } }, getters: { // user: state => state.user || {}, }, mutations: { // 记录用户信息 // SET_USERINFO(state, user) { // state.user = user // }, }, actions: {} }
src/store/index.js
javascriptimport { createStore } from 'vuex' import user from './modules/user.js' const store = createStore({ modules: { user, } }) export default store
main.js
javascriptimport store from './store' app.use(store)
axios
- Axios 是一个基于 promise 的网络请求库
- 安装
css
npm i axios
-
使用
src/utils/axios.js
jsimport axios from "axios" import { getToken } from "@/utils/auth.js" const instance = axios.create({ // 接口根路径 baseURL: import.meta.env.VITE_APP_BASE_API, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) // 添加请求拦截器 instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么 const token = getToken() if (token) { config.headers['token'] = token } return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 instance.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response.request.responseType == 'blob' ? response.data : response.data.data; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 const msg = error?.response.data.msg || '请求失败' // if (msg == "非法token,请先登录!") { // store.commit('CLEAR_DATA') // location.reload() // } // toast(msg, 'error') // 弹出提示请求失败 return Promise.reject(error); }); function request(url, type = 'GET', data = {}, options = {}) { return new Promise((resolve, reject) => { options = { url, method: type, ...options } if (type.toLowerCase() === 'get') { options.params = data } else { options.data = data } instance(options).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } export default request;
-
定义接口
在src目录下创建一个 api文件,专门放接口
src/api/user.js
jsimport request from "@/utils/axios.js"; // 用一个对象定义所有接口,这样到时候修改维护的时候比较方便 const URL = { /** * 用户列表 * @param (page) * */ USER_LIST: '/admin/user/:page', /** * 修改用户状态 * @param (id, status) * status: 状态:0禁用1启用 */ UPDATE_USER_STATUS: '/admin/user/:id/update_status', } export const get_userList_api = ({ page = 1, limit = 10, ...options }) => request(URL.USER_LIST.replace(':page', page), 'GET', { limit, ...options }) export const update_user_status = ({id, status = 1}) => request(URL.UPDATE_USER_STATUS.replace(':id', id), 'POST', {status})
-
调用
此时接口就定义好了,调用的时候直接引入
示例:
vue<script setup> import { get_userList_api, update_user_status } from '@/api/user.js' get_userList_api({ //...参数对象 }) </script>