[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？

基本概念
首先先了解先webpack的基本概念，webpack属于一个构建工具，主要有mode、entry、output、loader、plugin这几部分组成。
目标
本文会带你实现一个简易的vuecli具备和官方几乎一样的功能
实现移动端适配
使用eslint进行语法检查
进行开发和生产环境区分安装
首先先创建好以下目录config是配置目录，src是vue的目录，其中src目录下的server.js、client.js、entry-server.js、router.js不需要，这些属于ssr的配置部分，不在本次范围内。通过npm进行安装webpack// 没有npm的请先安装node.js（百度or谷歌）
通过npm init创建好一个package.json// 安装webpack webpack-cli
npm install webpack webpack-cli -D// 或者使用yarn
yarn add webpack webpack-cli -D
复制代码编写基本配置实现一个简单的打包
新建src/index.js， 作为我们的入口文件// src/index.js
console.log('hello world')
复制代码// 首先现在config目录下创建webpack.base.config.js，这里放基础配置// webpack.base.config.js
const path = require('path')module.exports = {// webpack4新增，用于区分环境，有development、production、none三种mode: 'development',// entry接收一个字符串或者一个对象，作为webpack的入口，多页面的话，就是多个入口entry: {main: 'src/index.js'}，output: {path: path.join(__dirname, '../dist'),// [name]是一个命名模板，可以根据entry动态生成名字，hash是一个哈希值,默认32位，这里只截取8位filename: '[name].[hash:8].js'}
}复制代码然后在package.json的scripts里面添加一条build命令
// package.json
{"name": "webpack","version": "1.0.0","description": "","main": "","dependencies": {"vue": "^2.6.10"},"scripts": {"build": "webpack --config config/webpack.base.config.js","test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"webpack": "^4.34.0","webpack-cli": "^3.3.4"}
}
复制代码然后就可以通过npm run build进行打包，一个最基础的配置就算完成了，当然这些还远远不够，距离要完成的部分还有很多。
配置开发环境
由于项目需要区分开发环境还是线上环境，我们需要一个环境变量去维护
// config/env.js
const process = require('process')
const env = process.env.NODE_ENVmodule.exports = env
复制代码配置热更新
npm install webpack-dev-server webpack-merge html-webpack-plugin friendly-errors-webpack-plugin -D/*webpack-dev-server 开启一个server 用于热更新，需要在插件配置webpack.HotModuleReplacementPlugin()html-webpack-plugin 让webpack支持htmlfriendly-errors-webpack-plugin 用于输出错误webpack-merge 用于合并webpack配置
*/
复制代码// webpack.dev.config.jsconst webpack = require('webpack')
const path = require('path')
const env = require('./env')
const webpackBaseConfig = require('./webpack.base.config')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')const devConfig = merge(webpackBaseConfig, {devServer: {contentBase: path.join(__dirname, 'src'),host: 'localhost',port: 8080,hot: true,compress: true,noInfo: true,// 在浏览器显示错误和警告overlay: {warnings: true,errors: true},// 去除掉每次修改时，控制台的日志clientLogLevel: 'none'},plugins: [new webpack.HotModuleReplacementPlugin(),// 注入到webpack，添加环境变量new webpack.DefinePlugin({'process.env': JSON.stringify(env)}),// plugin的解析顺序是从前往后的new HtmlWebpackPlugin({title: 'hello world',filename: 'index.html',template: './src/page/index.html',inject: true}),new FriendlyErrorsWebpackPlugin({compilationSuccessInfo: {messages: ['项目成功启动，地址是localhost:8080']}})]
})module.exports = devConfig
复制代码
安装依赖// 由于各个平台有些差异，我们需要安装cross-env
npm install cross-env -D
复制代码
添加命令，并修改package.json/*cross-env 区分平台差异--open 打开浏览器--progress 显示进度--colors 区分颜色--config 需要运行的配置目录，默认webpack.config.js
![](https://user-gold-cdn.xitu.io/2019/8/1/16c4bd2c0d07585a?w=300&h=300&f=gif&s=48409)NODE_ENV 当前的环境变量
*/
"scripts": {"serve": "cross-env NODE_ENV=development webpack-dev-server --open --progress --colors --config config/webpack.dev.config.js","build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.config.js","test": "echo \"Error: no test specified\" && exit 1"}
复制代码然后运行npm run serve就可以看到如下效果，然后你就可以各种改了，不用自己手动刷新页面了配置loader解析，并提取css
npm install css-loader style-loader postcss-loader url-loader babel-loader  @babel/preset-env @babel/core sass-loader node-sass responsive-loader vue-loader eslint-loader mini-css-extract-plugin autoprefixer VueLoaderPlugin @moohng/postcss-px2vw -Dcss-loader style-loader 用于处理css
postcss-loader 可以使用
autoprefixer 通过postcss给浏览器不支持的css加前缀
@moohng/postcss-px2vw 处理移动端适配，使用px转vw 不支持的转rem
sass-loader node-sass 处理sass scss文件，因为我用的是这个，less换成less-loader即可
vue-loader 处理vue文件
mini-css-extract-plugin 提取项目中的css到一个单独的文件
babel-loader @babel/preset-env @babel/core 处理js兼容
url-loader responsive-loader 处理图片，小于一定大小转成base64
eslint-loader eslint-config-standard eslint-plugin-vue 对js vue进行语法检查，采用eslint-config-standard规范，不想要的可以忽略
复制代码修改之前的配置，改为下面的样子
// webpack.base.config.jsconst path = require('path')
const env = require('./env')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {mode: env,entry: {main: './src/index.js'},output: {path: path.join(__dirname, '../dist'),publicPath: '/',filename: '[name].[hash:8].js',chunkFilename: '[name].[chunkhash].js'},module: {/*** webpack loader 加载顺序* mini/style,css,postcss,sass/less/stylus*/rules: [{test: /\.css$/,// loader的解析顺序是从后往前的，所以mini要放前面use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader', 'postcss-loader']},{test: /\.(sass|scss)/,use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader', 'postcss-loader', 'sass-loader']},{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {fallback: 'responsive-loader',limit: 4096,quality: 50,name: '[name].[hash:8].[ext]',outputPath: 'assets'}}]},{test: /\.vue$/,use: ['vue-loader']},{test: /\.js$/,exclude: /node_modules/,use: ['babel-loader', 'eslint-loader']},{enforce: 'pre',test: /\.(js)$/,loader: 'eslint-loader',exclude: /node_modules/}]},// 配置别名resolve: {alias: {'@': path.resolve(__dirname, 'src'),'~': path.resolve(__dirname, 'src/assets')},// false可以不带扩展enforceExtension: false,// 自动解析确定的扩展extensions: ['.js', '.vue']},plugins: [new VueLoaderPlugin(),new MiniCssExtractPlugin({filename: '[name].[contentHash:8].css'})]
}复制代码新建babel.config.js、postcss.config.js、.eslintrc.js
// 这边是babel7的配置
// babel.config.js
module.exports = {presets: [['@babel/env']],// 支持异步加载plugins: ['@babel/plugin-syntax-dynamic-import']
}// postcss.config.js
module.exports = {plugins: {autoprefixer: {},'@moohng/postcss-px2vw': {viewportWidth: 750,rootValue: 750,unitPrecision: 6,minPixelValue: 1}}
}
// .eslintrc.js
module.exports = {root: true,extends: 'standard',env: {es6: true,node: true},plugins: ['vue']
}
复制代码新建router/router.js
// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/home'Vue.use(Router)const router = new Router({mode: 'history',routes: [{path: '/',name: 'home',component: Home}]
})
export default router复制代码修改src/index.js
// App.vue 和vuecli一样，作为个入口文件
import Vue from 'vue'
import app from './App.vue'
import router from './router/router'Vue.config.productionTip = falsenew Vue({router,render: h => h(app)
}).$mount('#app')复制代码至此 webpack开发版、基础配置就已经完成，现在可以运行npm run serve进行修改了
编写生产环境配置
生产环境需要做的就是打包页面生成dist文件，并对页面进行优化分包继续安装依赖npm install clean-webpack-plugin terser-webpack-plugin optimize-css-assets-webpack-plugin progress-bar-webpack-plugin cssnano -D/*
clean-webpack-plugin 每次打包的时候清除掉之前打包的
terser-webpack-plgugin 对代码做混淆压缩，去掉console日志
optimize-css-assets-webpack-plugin 压缩css
progress-bar-webpack-plugin 以进度条的形式输出打包日志
*/
复制代码const webpack = require('webpack')
// const path = require('path')
// const glob = require('glob')
const env = require('./env')
const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base.config')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const OptimizationCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// const PurgecssPlugin = require('purgecss-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')const prodConfig = merge(webpackBaseConfig, {optimization: {// 对代码进行代码分割，生成公共包splitChunks: {chunks: 'all',minSize: 0, // 生产块的最小大小maxSize: 0,name: true,cacheGroups: {commons: {name: 'commons',chunks: 'all',minChunks: 2}}},minimizer: [new TerserPlugin({sourceMap: env === 'development',terserOptions: {cache: true,compress: {drop_debugger: true,drop_console: true}}})]},stats: {modules: false,source: false},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: 'hello world',filename: 'index.html',template: './src/page/index.html',inject: true}),new webpack.DefinePlugin({'process.env': JSON.stringify(env)}),// 压缩cssnew OptimizationCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano')}),// 去掉没用的css// new PurgecssPlugin({//   paths: glob.sync(path.join(__dirname, 'src'))// }),new ProgressBarPlugin({callback: function (res) {console.log('打包完成')}})]
})module.exports = prodConfig

[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？相关推荐

多个vue项目合并成一个_零基础搭建一个Vue项目，你学会了吗？
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
Vue CLI 3 多页应用项目的搭建
在项目初期时,从零开始搭建和配置本地前端开发环境是一项很繁琐的工作,需要考虑到项目目录结构.项目基本配置.Webpack 配置等等.通过 Vue CLI 3 可以快速的生成一个项目,这样我们就可以专注 ...
vue 开发环境搭建
1.创建vue项目 1.node js 生成项目,编译项目 2.hbuilder 开发环境 1.下载安装node js http://nodejs.cn/download/ 确认是否安装成功如果安装 ...
Vue的脚手架工具cli安装
vue项目的快速构建工具 cli [ 脚手架 ] 什么是cli? cli是vue提供的一个用来快速构建项目环境的一个工具,底层使用的是webpack cli目前有哪些版本? cli2 cli3 cli ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
离线/内网环境下搭建vue开发环境
系列文章目录第一讲离线/内网环境下搭建vue开发环境第二讲内网环境运行maven项目目录外网环境搭建一.安装nodeJS 二.安装vue依赖包内网环境正式开始准备工作: 一.安装no ...
spring boot +vue用什么记录登录状态_2019年web前端Vue面试题总结
点击右上方红色按钮关注"web秀",让你真正秀起来面试必备:2019Vue经典面试题总结(含答案) 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写 ...
Vue+element+axios+tornado前后端一体化开发环境配置笔记
Vue+element+axios+tornado开发环境配置笔记本系列文章由ex_net(张建波)编写,转载请注明出处. http://blog.csdn.net/ex_net/article/d ...

[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？

[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？

[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？相关推荐

最新文章

热门文章