vue-cli3.0创建项目，vue-cli3.0各项配置与安装， vue-cli3.0 上手教程（一）

缺乏、安全感 2022-03-25 14:06 397阅读 0赞

**目录**

1. 安装 vue-cli3.0 ，可以使用下列任一命令安装这个新的包：

2.打开终端，创建一个项目

3. 配置 自己选择

4. 项目构建完成 启动项目

4.1启动成功

4.2 运行报错  无报错 忽略

5.安装axios

6. 配置 vue.config.js

6.1 全局 CLI 配置 文档

6.2 配置跨域代理

--------------------

[vue-cli 3.0 官网教程][vue-cli 3.0]

## 1. 安装 vue-cli3.0 ，可以使用下列任一命令安装这个新的包： ##

npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

Vue CLI 需要 [Node.js][] 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm][] 或 [nvm-windows][]在同一台电脑中管理多个 Node 版本。你

还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

## 2.打开终端，创建一个项目 ##

vue create hello-world

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

default : 默认配置

Manually : 自己选择配置

## 3. 配置 自己选择 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

空格选择对应项，选择完后回车继续下一项配置选择

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][]

全部配置选择

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3][]

## 4. 项目构建完成 启动项目 ##

以前vue-cli2.0启动项目是 npm run dev 但vue-cli3.0 启动项目命令是 npm run serve

项目构建完成后

// 进入到构建的项目 目录下
    cd learvuecli3.0
    //启动命令
    npm run serve

### 4.1启动成功 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 4][]

### 4.2 运行报错  无报错 忽略 ###

当运行时报错了，报错如下

Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用：

[查看vue-loader文档][vue-loader]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 5][]

原因好像是 路由加载的问题，修改路由加载方式，改用路由懒加载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 7][]

## 5.安装axios ##

npm install axios --save

在main.js中引用

import axios from "axios";
    
    Vue.prototype.$axios = axios;

在需要用到的 \*\*\*.vue 页面使用

/* eslint-disable no-alert, no-console */
    //关闭eslint 语法对console和alert的报错 
    this.$axios
          .get("https://easy-mock.com/mock/5bfab71ae671096e7075005e/ww/vw_userlist")
          .then(res => {
            console.log(res);
          })
          .catch(error => {
            console.log(error);
          });

## 6. 配置 vue.config.js ##

### 6.1 [全局 CLI 配置 文档][CLI _] ###

有些针对 `@vue/cli` 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫 `.vuerc` 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。

你也可以使用 `vue config` 命令来审查或修改全局的 CLI 配置。

*   vue.config.js

// vue.config.js
    
    module.exports = {
      // 项目部署的基本路径
      // 默认假设你的应用将会部署在域名的根部
      // 比如，https://www.vue-cli.com/
      //如果你的应用是部署在一个子路径下，那么你需要在这里指定子路径，比如，如果你部署在 https://www.my-vue.com/my-app/; 那么将这个值改为 “/my-app/”
      publicPath: "/",
    
      //将构建好的文件输出到哪里 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
      outputDir: "dist",
    
      //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
      assetsDir: "",
    
      // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
      // 设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
      // 如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。
      lintOnSave: true,
    
      //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
      runtimeCompiler: false,
    
      // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
      transpileDependencies: [],
    
      //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
      productionSourceMap: true,
    
      //是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
      chainWebpack: () => {},
    
      //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
      parallel: require("os").cpus().length > 1,
    
      // 向 PWA 插件传递选项。
      // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
      pwa: {},
    
      // 所有 webpack-dev-server 的选项都支持。注意：有些值像 host、port 和 https 可能会被命令行参数覆写。
      //有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
      // 代理配置
    
      devServer: {
        host: "0.0.0.0",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器  open: 'Google Chrome'-默认启动谷歌
        // proxy: 'http://localhost:9000' // 配置跨域处理,只有一个代理
    
        // 配置多个代理
        proxy: {
          "/api": {
            target: "https://way.jd.com", //目标主机
            ws: true, //代理的WebSockets
            changeOrigin: true, //需要虚拟主机站点
            pathRewrite: {
              "^/api": ""
            }
          }
        }
      },
    
      // 第三方插件选项
      // 这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。
      pluginOptions: {}
    };

### 6.2 配置跨域代理 ###

当页面需要请求数据与后台交互时，经常出现跨域问题，如果不处理就很不能顺利的调试

*   未配置代理时请求接口报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 8][]

*  配置代理后可以正常请求数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 9][]

*  vue.config.js

devServer: {
        host: "0.0.0.0",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器  open: 'Google Chrome'-默认启动谷歌
        // proxy: 'http://localhost:9000' // 配置跨域处理,只有一个代理
    
        // 配置多个代理
        proxy: {
          "/api": {
            target: "https://way.jd.com", //目标主机
            ws: true, //代理的WebSockets
            changeOrigin: true, //需要虚拟主机站点
            pathRewrite: {
              "^/api": ""
            }
          }
        }
      }

在main.js 全局调

// main.js
    
    Vue.prototype.HOST = "/api";
    
    
    // 调取页面.vue
    
     created() {
        let url =
          this.HOST + "/jisuapi/channel?appkey=5bd8b538e744ad86c9d54e081718ab7f";
        console.log(this.HOST);
        this.$axios
          .get(url)
          .then(res => {
            console.log(res.data);
            this.newsData = res.data.result.result;
            console.log(this.newsData);
          })
          .catch(error => {
            console.log(error);
          });
      }

或者直接在需要用到的 文件直接调用

// 调取页面.vue
     
    created() {
        let url = "/api/jisuapi/channel?appkey=5bd8b538e744ad86c9d54e081718ab7f";
        console.log(this.HOST);
        this.$axios
          .get(url)
          .then(res => {
            console.log(res.data);
            this.newsData = res.data.result.result;
            console.log(this.newsData);
          })
          .catch(error => {
            console.log(error);
          });
      }

## 7.清除浏览器默认样式 normalize.css ##

安装 normailze.css

npm install normalize.css

使用，在main.js中引入 全局使用

import "normalize.css";

更新未完待续，后面会在探索cli3的爬坑路上继续记录，相互交流......

[vue-cli 3.0]: https://cli.vuejs.org/zh/guide/
[Node.js]: https://nodejs.org/
[nvm]: https://github.com/creationix/nvm
[nvm-windows]: https://github.com/coreybutler/nvm-windows
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20220325/152cf9cdedd74960ac2adba8e8083f14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20220325/c3aa0c932787494b8c1d23bd59e78ae3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: /images/20220325/daf8ed9d63f649fabc5e1beea573a927.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3]: /images/20220325/cca9778383164be1b0ba7b528187c29b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 4]: /images/20220325/4a7e45f4b6f9496c897807756feb1c10.png
[vue-loader]: https://vue-loader.vuejs.org/zh/migrating.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 5]: /images/20220325/2e58684afd354da180e51e6afb12727e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 6]: /images/20220325/ed3e2edd0570455f9209a16eb578c841.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 7]: /images/20220325/521437999afd40b2b0997a961c15445a.png
[CLI _]: https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 8]: /images/20220325/cfd981cf74964e059a29581707a5c47b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 9]: /images/20220325/e2594b9874184c0ebde9b73e027d3445.png