1、安装和配置webpack
npm install -g @vue/cli
2、基于3.x版本的脚手架创建vue项目
// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目
vue create my-project
// 2. 基于 图形化界面 的方式，创建 新版 vue 项目
vue ui
// 3. 基于 2.x 的旧模板，创建 旧版 vue 项目
npm install -g @vue/cli-init
vue init webpack my-project3、脚手架自定义配置
推荐在vue.config.js中单独配置，不要在package.json中，package.json单独管理包的。
4、项目优化
安装babel-plugin-contransfor-remove-console（运行环境），移除文件中的console.*，需要在babel.config.js里配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
],
//就是这里配置
'transform-remove-console'
]
}4、项目优化策略
1、生成打包报告
打包时，可以生成报告，生成报告有两种方式：
1、通过命令行参数的形式生成报告
vue-cli-service build --report
2、通过可视化UI面板直接查看报告2、修改vue.config.js修改webpack的默认配置
在vue-cli-3.0生成的项目中，默认隐藏了webpack的配置项
如果需要修改webpack的默认配置需求，需要在项目根目录中按需创建vue.config.js
基本格式如下：
// vue.config.js
module.exports = {
// xxx
}3、为开发模式与发布模式指定不同的打包入口
默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(src/main.js)
为了将项目的开发过程与发布过程分离，需要分两种模式各自指定打包的入口文件：
1、开发模式的入口文件为src/main-dev.js
2、发布模式的入口文件为src/main-prod.js4、通过chainWebpack自定义打包入口
module.exports = {
chainWebpack:config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production',config=>{
console.log('prod')
config.entry('app').clear().add('./src/main-prod.js')
})
// 开发模式
config.when(process.env.NODE_ENV === 'development',config=>{
console.log('dev')
config.entry('app').clear().add('./src/main-dev.js')
})
}
}5、通过external加载外部CDN资源
默认情况下，通过import语法导入的第三方依赖包最终都会被打包合并到同一个文件中，从而导致打包成功后某个文件过大的问题。
为了解决以上问题，可以通过webpack的external节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，都不会被打包。
具体代码如下：
// 第一步
config.set('externals',{
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
loadsh: '_',
echarts: 'echarts',
nprogress: 'Nprogress',
'vue-quill-editor': 'VueQuillEditor'
})
//第二步
在public/index.html文件的头部添加CND资源引用：
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css" />
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.1.6/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>6、特别注意如果要将element-ui也从cdn引入
首先在externals节点写上
'element-ui': 'ELEMENT'
其次将main.js里 import 'xxx.element.xx' Vue.use(xxx.element.xxx)全部移除掉7、通过设置args定制不同环境的首页和是否引用CDN
// 在vue.config.js不同环境设置Plugin参数
config.plugin('html').tap(args => {
args[0].isProd = true
args[0].title = '发布-Vue电商后台管理系统'
return args
})
// 在index.html判断内容
<title><%= htmlWebpackPlugin.options.title %></title>
// 同理用 <% xxx %>判断是否需要引入CDN资源8、路由懒加载
1、安装@babel/plugin-syntax-dynamic-import包
2、在babel.config.js配置文件中声明该插件
3、将路由改为按需加载的形式，示例代码如下：
// webpackChunkName:分组的意思,会将同一分组的组件打包到同一JS种，加载的时候统一加载
const foo1 = () => import( /* webpackChunkName: "group-foo" */ './Foo1.vue')
const foo2 = () => import( /* webpackChunkName: "group-foo" */ './Foo2.vue')
