搭建vue后台系统

最新推荐文章于 2024-10-12 01:34:12 发布

苍海一声呵呵呵

最新推荐文章于 2024-10-12 01:34:12 发布

阅读量298

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_38910842/article/details/103057484

版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍如何使用VueCLI v3.2.3创建并配置一个Vue后台管理系统，包括手动选择Router、Vuex等特性，配置Less作为CSS预处理器，设置ESLint代码规则检测，并通过yarn进行包管理。同时，文章还介绍了如何配置路由懒加载、引入axios和Element-UI，以及设置本地mock数据和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搭建vue后台系统

使用Vue cli创建项目

Vue CLI版本：v3.2.3

初始化项目vue create demo
选择模板（选择手动配置）
1. default (默认配置)
2. Manually select features (手动配置)
选择配置
选择：Router，Vuex，CSS Pre-processors，Linter
是否使用路由的 history 模式
选择：yes
选择css预处理器
选择：Less
选择Eslint代码验证规则
选择：ESLint + Standard config // 基本配置
选择什么时候进行代码规则检测
选择：Lint on save // 保存就检测
把babel,postcss,eslint这些配置文件放哪
选择：In dedicated config files // 独立文件放置
是否保存配置
选择：yes
给配置起名字
使用yarn还是npm进行包管理
选择：yarn
打开项目
yarn serve启动项目

配置eslint

新增.eslintrc.js
参考eslint验证

添加githook，提交代码前做代码规范验证

编辑器配置

新增.editorconfig文件

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

扩展webpack配置

新增vue.config.js文件
由于vue-cli3 最大的特点就是零配置，脚手架把webpack相关的配置都隐藏在@vue\preload-webpack-plugin中，默认的配置可以满足大部分应用场景。
使用 vue inspect 可以查看到详细的配置列表。
当我们需要修改或者扩展webpack配置项时，可以在根目录下新增 vue.config.js 文件