一个新的Vue项目要如何配置

一个新的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
javascript 复制代码
```
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}
```
最后，在你的 Vite 入口文件中导入 virtual:windi.css：

main.js
arduino 复制代码
```
import 'virtual:windi.css'
```

VueUse里的useCookies

VueUse是一个使用vue的使用工具库，useCookies是设置token时候用的
安装

less 复制代码

// 包装器
npm i @vueuse/integrations
npm i universal-cookie

使用

创建 src/utils/auth.js 文件

js 复制代码

import { 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 文件

js 复制代码

import nProgress from "nprogress";

  // 显示全屏 loading
  export function showFullLoading() {
      nProgress.start()
  }

  // 隐藏全屏 loading
  export function hideFullLoading() {
      nProgress.done()
  }

调用：在全局守卫里面调用

创建 src/permission.js

每当路由跳转的时候调用，这里顺便判断是否登录

js 复制代码

import 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

javascript 复制代码

import { 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

javascript 复制代码

export default {
  state: () => {
          return {
              // 用户数据
              // user: null
          }
     },
     getters: {
          // user: state => state.user || {},
     },
     mutations: {
         // 记录用户信息
         // SET_USERINFO(state, user) {
         //     state.user = user
         // },
     },
     actions: {}
  }

src/store/index.js

javascript 复制代码

import { createStore } from 'vuex'

  import user from './modules/user.js'

  const store = createStore({
      modules: {
          user,
      }
  })

  export default store

main.js

javascript 复制代码

import store from './store'

app.use(store)

axios

Axios 是一个基于 promise 的网络请求库
安装

css 复制代码

npm i axios

使用

src/utils/axios.js

js 复制代码

import 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

js 复制代码

import 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>