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预处理器 , 根据自己的需要选择
lesssass8.
ESLint默认
- 什么启用
ESLint保存的时候还是 提交的时候,验证不选 空号切换选中和不选 如果不选的话会自动生成一个
vue.config.js文件
- 后面都直接回车就行了
.... 等待安装成功 成功后 看提示11.
cd进入到 项目根目录12.
npm run记住 进入 项目根目录 在执行相关指令
5. 以前的 目录结构大概样子
![J}`D]PAK9%WWA6KL[8(CK~N.png](https://ucc.alicdn.com/pic/developer-ecology/459ad6adb2cd4bcdb3d5d9806b6d2c75.png "J}`D]PAK9%WWA6KL[8(CK~N.png")
6. 现在的 4x的 默认结构
![R)_I$61B[[X936VWVS8E]3T.png](https://ucc.alicdn.com/pic/developer-ecology/c65809d7e4244c61913d63047d547ebf.png "R)_I$61B[[X936VWVS8E]3T.png")
7. 空空如也
所以 这个我们需要在这个项目的根目录创建 vue.config.js文件 就是和 package.json文件同级
上图中的vue.config.js是我手动创建的
8. 如果是自己手动配置的,会多些 storerouter 等文件夹
9. 单文件组件的单独运行调试配置
- 全局安装配置
npm i -g @vue/cli-service-global
- 在想要运行的
vue文件目录 执行指令
vue serve my.vue
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 }
