关于前端:vuecli30创建项目vuecli30各项配置与安装-vuecli30-上手教程

这个文章里对抉择的配置没有具体解释，如果想看更具体的解释能够参考这篇文章
https://www.cnblogs.com/Jimc/…

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

default : 默认配置

Manually : 本人抉择配置 

3. 配置 本人抉择
   

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

全副配置抉择

4. 我的项目构建实现 启动我的项目
   以前 vue-cli2.0 启动我的项目是 npm run dev 但 vue-cli3.0 启动我的项目命令是 npm run serve 

我的项目构建实现后

// 进入到构建的我的项目 目录下

cd learvuecli3.0
// 启动命令
npm run serve
4.1 启动胜利

4.2 运行报错  无报错 疏忽
当运行时报错了，报错如下

Vue Loader v15 当初须要配合一个 webpack 插件能力正确应用：

查看 vue-loader 文档

起因如同是 路由加载的问题，批改路由加载形式，改用路由懒加载

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 配置 文档

有些针对 @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 配置跨域代理
     当页面须要申请数据与后盾交互时，经常出现跨域问题，如果不解决就很不能顺利的调试

 未配置代理时申请接口报错

配置代理后能够失常申请数据

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";