vue---vue-cli3 vue-cli4脚手架开发环境搭建

vue-cli3 vue-cli4脚手架开发环境搭建步骤如下

1、nodejs安装

nodejs---win7 nodejs安装与卸载

2、安装vue-cli3或4 

全局安装过旧版本 vue-cli(1.x 或 2.x)要先卸载【 npm uninstall vue-cli -g 】，未安装则跳过此步。

安装vue-cli最新版本 【npm install -g @vue/cli 】，安装完成后查看当前版本，确保安装成功：【vue --version】或【vue -V】

安装指定版本【npm install -g @vue/cli@版本号】

当前我安装的版本为最新版@vue/cli 4.5.9

3、创建项目及配置选择

创建项目【vue create my-pro1】

配置选择：首先会提示你选择一个preset（预设），我选择的是自定义配置【Manually select features】，也可选择之前保存的预设进行配置；

说明：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。

自动化代码格式化检测，选【Eslint+Prettier】

【In dedicated config files】在专用配置文件中配置Babel、ESLint等

在根目录新建【vue.config.js】，并配置如下，将覆盖默认的配置（更多配置详情参见官网：https://cli.vuejs.org/zh/config/）

module.exports = {
  baseUrl: "/", //根路径
  outputDir: "dist1", //构建输出目录
  assetsDir: "assets", //静态资源目录
  lintOnSave: false, //是否开启eslint保存检测
  runtimeCompiler: true,
  publicPath: "/", // 设置打包文件相对路径
  devServer: {
    open: true, //配置自动启动浏览器
    host: "localhost",
    https: false,
    hotOnly: false, //热更新
    port: 8071,
    // 配置跨域-请求后端的接口
    proxy: { 
      "/api": {
        target: "http://172.20.10.3:8000", //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
}

关闭 eslint代码检查【lintOnSave: false】

4、启动项目

进入项目根目录【cd my-pro1】，启动项目【npm run serve】

5、打包

【npm run build】

---

6、其他

vue3.0新增可视化ui操作界面构建Gui【vue ui】

如果仍然需要使用旧版本的 vue init 功能，可以全局安装一个桥接工具【npm install -g @vue/cli-init】

更详细请参考官网介绍【https://cli.vuejs.org/zh/guide/installation.html】，以上仅个人做笔记，加强学习效果。