这个文章里对抉择的配置没有具体解释，如果想看更具体的解释能够参考这篇文章
https://www.cnblogs.com/Jimc/...
- 装置 vue-cli3.0 ，能够应用下列任一命令装置这个新的包：
npm install -g @vue/cliORyarn global add @vue/cliVue CLI 须要 Node.js 8.9 或更高版本 (举荐 8.11.0+)。你能够应用 nvm 或 nvm-windows在同一台电脑中治理多个 Node 版本。你
还能够用这个命令来查看其版本是否正确 (3.x)：
vue --version
2.关上终端，创立一个我的项目vue create hello-world
default : 默认配置
Manually : 本人抉择配置
- 配置 本人抉择
空格抉择对应项，抉择完后回车持续下一项配置抉择
全副配置抉择
- 我的项目构建实现 启动我的项目
以前vue-cli2.0启动我的项目是 npm run dev 但vue-cli3.0 启动我的项目命令是 npm run serve
我的项目构建实现后
// 进入到构建的我的项目 目录下
cd learvuecli3.0//启动命令npm run serve4.1启动胜利4.2 运行报错 无报错 疏忽
当运行时报错了，报错如下
Vue Loader v15 当初须要配合一个 webpack 插件能力正确应用：
查看vue-loader文档
起因如同是 路由加载的问题，批改路由加载形式，改用路由懒加载
5.装置axiosnpm 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); });- 配置 vue.config.js
6.1 全局 CLI 配置 文档
有些针对 @vue/cli 的全局配置，例如你习用的包管理器和你本地保留的 preset，都保留在 home 目录下一个名叫 .vuerc 的 JSON 文件。你能够用编辑器间接编辑这个文件来更改已保留的选项。
你也能够应用 vue config 命令来审查或批改全局的 CLI 配置。
vue.config.js// vue.config.jsmodule.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.cssnpm install normalize.css应用，在main.js中引入 全局应用import "normalize.css";