一个新的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>
相关推荐
开心工作室_kaic几秒前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿19 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具40 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx