面向有一定前端基础的同学（简单会用HTML5、CSS3、javascript相关语法即可）
一 、准备工作（熟悉此过程的可以跳过本章节）
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
详细异步>>https://cli.vuejs.org/zh/guide/
另附上github地址，以下为2020/03/19新建项目记录，也是进行这次计划的第一步
https://github.com/a307420929/Vue-management-system
image.png
-
在本地通过Vue CLI初始化一个Vue项目
这里会让你选一些基本的配置项，我这里选择了Babel，Router，Vuex，Linter
剩下的就一路回车就好
image.png
格式化完后，本地应该有以下文件夹，一个纯净的Vue项目
image.png
接着上面
vue create的命令，在控制台输入如下：
image.png
打开Chrome 输入 http://localhost:8080/，显示如下，此时一个纯净的Vue项目就算在本地跑起来了
image.png
二 、基于初始化环境开始配置我们的项目
因为是后台管理系统，很明显上面的页面并不是我们想要的样子，所以先把一部分没有用的代码删除，让开始的代码看起来更加舒适，大道至简
细心的同学可能会发现怎么没有build文件夹，这是因为 vue-cli 3 学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。
其实一切都是因为 vue-cli 3 的项目初始化，帮开发者已经解决了 80% ，甚至绝大部分情形下的 webpack 配置，但是当我们想个性化自己的配置，我们就需要vue.config.js文件了
-
新建vue.config.js
在根目录新建vue.config.js，具体配置项参考下列代码，只是参考，具体情况试自己项目而定
image.png
const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 基本路径 vue-cli3.3+新版本使用 publicPath vue-cli3.3以下版本使用baseUrl
publicPath: "./",
/* 输出文件目录：在npm run build时，生成文件的目录名称 */
outputDir: 'dist',
/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
assetsDir: "static",
/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
productionSourceMap: false,
/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
filenameHashing: false,
/* 代码保存时进行eslint检测 */
lintOnSave: true,
/* webpack-dev-server 相关配置 */
devServer: {
/* 自动打开浏览器 */
open: true,
host: '0.0.0.0',
port: 8077,
https: false,
hotOnly: false,
/* 使用代理 */
// proxy: { //配置自动启动浏览器
// "/XX/*": {
// target: "http://172.11.11.11:7071",
// changeOrigin: true,
// // ws: true,//websocket支持
// secure: false
// },
// "/XX2/*": {
// target: "http://172.12.12.12:2018",
// changeOrigin: true,
// //ws: true,//websocket支持
// secure: false
// },
// }
},
// webpack 配置，键值对象时会合并配置，为方法时会改写配置
// https://cli.vuejs.org/guide/webpack.html#simple-configuration
configureWebpack: (config) => {
// 简单/基础配置，比如引入一个新插件
//生产and测试环境
let pluginsPro = [
// Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
new BundleAnalyzerPlugin(),
];
//开发环境
let pluginsDev = [
// //移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole)
// new vConsolePlugin({
// filter: [], // 需要过滤的入口文件
// enable: true // 发布代码前记得改回 false
// }),
];
if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
config.plugins = [...config.plugins, ...pluginsPro];
} else {
// 为开发环境修改配置...
config.plugins = [...config.plugins, ...pluginsDev];
}
},
chainWebpack: (config) => {
// 链式配置
config.resolve.alias.set('styles', resolve('src/assets/styles'))
},
// css相关配置
css: {
// 启用 CSS modules
requireModuleExtension: false,
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
sass: {
//设置css中引用文件的路径，引入通用使用的scss文件（如包含的@mixin）
data: `
$baseUrl: "/";
@import '@/assets/scss/_common.scss';
`
}
},
},
// 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
pluginOptions: {
'style-resources-loader': { //https://github.com/yenshih/style-resources-loader
preProcessor: 'scss', //声明类型
'patterns': [
//path.resolve(__dirname, './src/assets/scss/_common.scss'),
],
//injector: 'append'
}
}
}
- babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
]
}
3..eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
以上，
如有问题，欢迎批评指正
后续会在此基础上继续更新，感谢欢迎关注支持
网友评论