安装及版本切换

查看当前版本,如果是2开头说明当前使用的是vue-cli2,4开头的话就是vue-cli4

vue --version

如果无法识别vue命令说明没有安装vue-cli,使用以下说明进行安装
安装2.0版本:

npm install -g vue-cli

安装4.0版本:

npm install -g @vue/cli

版本切换,即卸载当前版本,安装另外的版本
从2.0升级到4.0:

npm uninstall -g vue-cli
npm install -g @vue/cli

从4.0降到2.0:

npm uninstall -g @vue/cli
npm install -g vue-cli

如果切换失败,显示无法加载文件…/npm/vue.ps1,因为在此系统上禁止运行脚本。。。。
在这里插入图片描述
遇到这种情况 使用管理员身份运行 PowerShell,
然后输入 set-executionpolicy remotesigned,出现以下选项,然后输入Y回车即可

执行策略更改 
执行策略可以防止您执行不信任的脚本。更改执行策略可能会使您面临 about_Execution_Policies 
帮助主题中所述的安全风险。是否要更改执行策略? 
[Y](Y)  [N](N)  [S] 挂起(S)  [?] 帮助 (默认值为“N”): 

项目初始化

2.0初始化,vue init <模板名称(webpack比较常用)> [项目名称]

vue init webpack cli2-test

如果下载模板速度慢,可以修改npm仓库到淘宝镜像 npm config set registry https://registry.npm.taobao.org

2.0项目初始化参数介绍

//项目名称
 Project name ...
 //作者的信息,会默认从git中读取信息
 Project description ...
 Author ...
 //vue build的选项 1.runtime-compiler   2.runtime-only (一般选第一个就好)
 vue build ...
 //是否安装vue-router,一般选用YES,省去手动创建路由
 Install vue-router? ..
 //是否使用ESLint检测代码规范,规范可根据选项选择不同的规范库或者自己添加规范
 use ESLint to link your code
 //是否写单元测试 (一般不使用)
 Set up unit tests
 //是否使用Nightwatch来进行e2e测试 (2代表to  e to e 点对点)
 Setup e2e test with Nightwatch?
 //使用npm或者yarn包管理工具
 use npm
 use yarn

2.0项目初始化参数推荐
在这里插入图片描述
4.0初始化,vue create [项目名称]

vue create cli3-test

4.0项目初始化参数介绍

//选择一个配置方式
 please pick a perset  (一般选最后一个Manually select features(手动选择特性) )
 //选择对于你的工程所需要的特性 (用空格选择)
 check the features needed for your project
( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
 //对应的配置文件单独生成还是放在package.json里
 where do you prefer placing config for babel
 //要不要把刚才自己选择的配置保存下来
 save this as a preset for future projects?

4.0项目初始化参数推荐
在这里插入图片描述

目录结构对比

2.0目录结构
在这里插入图片描述
4.0 目录结构
在这里插入图片描述
对比一下两种方式初始化出来的项目结构,下面说一些对我们开发影响比较大的主要的变化

  1. 4.0版本中项目环境变量配置文件没有了(dev.env.js / prod.env.js)
    我们可以通过在项目根目录下手动创建不同环境的配置文件,具体的环境变量名称由package.json中运行参数决定,下面举个例子添加development、production和uat版本的环境变量:
    在这里插入图片描述
//  .env.delelopment
NODE_ENV=development
VUE_APP_MODE=development
BASE_URL=/develop

// .env.production
NODE_ENV=production
VUE_APP_MODE=production
BASE_URL=/api

// .env.uat
NODE_ENV=production
VUE_APP_MODE=uat
BASE_URL=/uat
// package.json
----
"scripts": {
   "serve": "vue-cli-service serve",
   "build:uat": "vue-cli-service build --mode uat", // 通过 --mode来运行不同的环境,自动识别到.env.uat配置文件
   "build:production": "vue-cli-service build --mode production",
   "lint": "vue-cli-service lint"
 },
 ----
  1. 4.0版本中不同环境的webpack配置文件也没有了(webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js)
    同样,我们也可以再根目录中创建vue.config.js文件来进行webpack和vue的一些配置
    在这里插入图片描述
const path = require('path')

module.exports = {
 publicPath: './', // 基本路径,打包时加上.
 outputDir: process.env.outputDir, // 输出文件目录
 lintOnSave: false, // eslint-loader 是否在保存的时候检查
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 // webpack配置
 chainWebpack: (config) => {
   config.resolve.symlinks(true)
 },
 configureWebpack: (config) => {
   if (process.env.VUE_APP_MODE === 'production') {
     // 为生产环境修改配置...
     config.mode = 'production'
   } else {
       // 为开发环境修改配置...
       config.mode = 'development'
   }
   Object.assign(config, {
     // 开发生产共同配置
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
         '@c': path.resolve(__dirname, './src/components'),
         '@p': path.resolve(__dirname, './src/views')
       } // 别名配置
     }
   })
 },
 productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
 // css相关配置
 css: {
   // extract: true, // 是否使用css分离插件 ExtractTextPlugin
   sourceMap: false, // 开启 CSS source maps?
   loaderOptions: {
     css: {}, // 这里的选项会传递给 css-loader
     less: {
       modifyVars: {
         // less vars,customize ant design theme

         // 'primary-color': '#F5222D',
         // 'link-color': '#F5222D',
         // 'border-radius-base': '4px'
       },
       // DO NOT REMOVE THIS LINE
       javascriptEnabled: true
     },
     postcss: {
       plugins: [
         // 把px单位换算成rem单位
         require('postcss-pxtorem')({
           rootValue: 75, // 换算的基数(设计图750的根字体为32)
           selectorBlackList: ['.van-'], // 要忽略的选择器并保留为px。
           propList: ['*'], // 可以从px更改为rem的属性。
           minPixelValue: 2 // 设置要替换的最小像素值。
         }),
         require('autoprefixer')
       ]
       // plugins: [
       //   require('autoprefixer')
       // ]
     } // 这里的选项会传递给 postcss-loader
   }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
   // modules: false, // 启用 CSS modules for all css / pre-processor files.
   requireModuleExtension: true
 },
 parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
 pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 // webpack-dev-server 相关配置
 devServer: {
   open: false, // 自动打开浏览器
   host: '0.0.0.0', // 允许外部ip访问
   port: 8000, // 端口
   https: false, // 启用https
   overlay: {
     warnings: true,
     errors: true
   }, // 错误、警告在页面弹出
   // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
   proxy: {
       '/api': {
           target: '<url>',
           ws: true,
           changeOrigin: true
       },
       '/foo': {
           target: '<other_url>'
       }
   },  // 配置多个代理
 },
 // 第三方插件配置
 pluginOptions: {}
}

IE兼容性

2.0版本构建出来的项目,如果使用路由懒加载(Promise),或者其他ES6语法,在IE中会报错语法不支持Promise,或者报其他错误,最终结果都是router-view中加载不出来内容
4.0版本不会出现此问题,因为脚手架已经帮我们做好了


解决办法1

  1. 安装@babel/polyfill
npm install @babel/polyfill --save-dev
  1. 配置webpack.base.conf.js中的entry
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
  	 // 在这里将入口文件通过polyfill引入
-    app: './src/main.js'
+    app: ['@babel/polyfill', './src/main.js']
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  ...

解决办法2
办法1应该可以正常加载异步路由,如果还未显示,可以试另外一种方法:

  1. 安装babel-preset-es2015
npm install babel-preset-es2015 --save-dev
  1. 在根目录下的 .babelrc 添加es2015
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2",
+   "es2015"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

持续更新。。。

Logo

前往低代码交流专区

更多推荐