1, 前言
- 之前一直用的是 vue init webpack my-project 创建项目
2.基础项目的结构也很完善- 最近又看了遍 vue-cli 发现用法不太一样,就玩了下
- 首先刚开始用的时候我内心也是排斥的,毕竟新版 默认创建的话 比较空空如也
但是要拥抱变化嘛, 发现可取之处,从0开始搭建结构,有助于对整个项目, 脚手架都有更深的认识- 简单的不同点罗列如下
- 准备工作
//淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 默认安装最新的 4x
npm install -g @vue/cli
// 查看版本
vue -V
2. 图形化创建界面
vue ui
没啥好说的, 都是中文,一路向下就行
值得说的就是这里 可以 选择选用vue2还是vue3
也可以手动配置依赖 ,这个比较简单就不详细说了
导入项目
配置项目
依赖安装
目录配置
打包配置
任务界面 可以查看 指令的配置
都是中文 自己研究
3. 指令 默认创建
--vue create 后跟项目名字
这种创建方式 和react就保持一致了
vue create hello-world
4. 选择一些配置的 指令创建
- 终端进入到你想保存项目的 目录
vue create yzs-cli-4- 选择
Manually select features代表自己配置不用默认的- 选择 安装的依赖 上下键 选择 空格 代表选中 比如
Babelvuexroutercss预处理器
5.
2.x vue版本选择
6.history mode输入 n 代表不需要
- 选择 css预处理器 , 根据自己的需要选择
lesssass
8.
ESLint默认
- 什么启用
ESLint保存的时候还是 提交的时候,验证不选 空号切换选中和不选 如果不选的话会自动生成一个
vue.config.js文件
- 后面都直接回车就行了
.... 等待安装成功 成功后 看提示
11.
cd进入到 项目根目录
12.npm run
记住 进入 项目根目录 在执行相关指令
5. 以前的 目录结构大概样子
1.png
6. 现在的 4x的 默认结构
1.png
7. 空空如也
所以 这个我们需要在这个项目的根目录创建 vue.config.js文件 就是和 package.json文件同级
上图中的vue.config.js是我手动创建的
8. 如果是自己手动配置的,会多些 store router 等文件夹
9. 单文件组件的单独运行调试配置
- 全局安装配置
npm i -g @vue/cli-service-global
- 在想要运行的
vue文件目录 执行指令
vue serve my.vue
1.png
10. vue.config.js 常用配置
可以简单的理解成以前所有
webpack的配置都融合到一起放这里了
当然你也可以 自己创建webpack模块 在这vue.config.js文件引入
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, dir)
}
// vue.config.js
module.exports = {
/*
Vue-cli3:
Crashed when using Webpack `import()` #2463
https://github.com/vuejs/vue-cli/issues/2463
*/
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// 打包app时放开该配置
publicPath: '/v1/myapp',
configureWebpack: config => {
// 生产环境取消 console.log
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
// 打包文件大小配置
config['performance'] = {
'maxEntrypointSize': 10000000,
'maxAssetSize': 30000000
}
}
},
chainWebpack: (config) => {
config.resolve.alias
.set('@$', resolve('src'))
.set('@api', resolve('src/api'))
.set('@assets', resolve('src/assets'))
.set('@comp', resolve('src/components'))
.set('@views', resolve('src/views'))
// 生产环境，开启js\css压缩
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin').use(new CompressionPlugin({
test: /\.(js|css|less)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
}))
}
// 配置 webpack 识别 markdown 为普通的文件
config.module
.rule('markdown')
.test(/\.md$/)
.use()
.loader('file-loader')
.end()
// 编译vxe-table包里的es6代码，解决IE11兼容问题
config.module
.rule('vxe')
.test(/\.js$/)
.include
.add(resolve('node_modules/vxe-table'))
.add(resolve('node_modules/vxe-table-plugin-antd'))
.end()
.use()
.loader('babel-loader')
.end()
},
css: {
loaderOptions: {
less: {
modifyVars: {
/* less 变量覆盖，用于自定义 ant design 主题 */
'primary-color': '#1890FF',
'link-color': '#1890FF',
'border-radius-base': '4px'
},
javascriptEnabled: true
}
},
extract: process.env.NODE_ENV === 'production' ? {
ignoreOrder: true
} : false
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname,"src/assets/style/common.less")]
}
},
devServer: {
disableHostCheck: true,
port: 3000,
open: true,// 自动打开浏览器
proxy: {
// 代理可以配置多个
/* '/api': {
target: 'https://mock.xxx.xxx/mock/xxxxxx1263636/antd-pro', //mock API接口系统
ws: false,
changeOrigin: true,
pathRewrite: {
'/jeecg-boot': '' //默认所有请求都加了jeecg-boot前缀，需要去掉
}
}, */
'/mine-boot': {
target: 'https://localhost:443', // 请求本地 需要jeecg-boot后台项目
ws: false,
changeOrigin: true
}
}
},
// 关闭每次保存代码都进行eslint检验
lintOnSave: false
}
