本文不对选择的配置进行详细讲解。如果想看更详细的解释,可以参考这篇文章https://www.cnblogs.com/Jimc/p/10278254.htmlhttps://www.cnblogs.com/coober/p/10875647.html如果你在安装vue-cli3.0之前已经全局安装了旧版本的vue-cli(1.x或2.x)必须先卸载,否则跳过这一步:npmuninstallvue-cli-g//oryarnglobalremovevue-cli 2、VueCLI3要求nodeJs≥8.9(官方推荐8.11.0+,可以使用nvm或者nvm-windows在同一台电脑上管理多个Node版本)。安装@vue/cli(VueCLI3的包名由vue-cli改为@vue/cli)npminstall-g@vue/cliORyarnglobaladd@vue/cliVueCLI需要Node.js8.9以上(推荐8.11).0+)。您可以使用nvm或nvm-windows在同一台计算机上管理多个节点版本。您还可以使用此命令检查版本是否正确(3.x):vue--version2。打开终端,新建一个项目vuecreatehello-worlddefault:默认配置Manually:自己选择配置自己选择?勾选你的项目需要的功能:(按选择,totoggleall,toinvertselection)()Babel//转码器,可以将ES6代码转成ES5代码,以便在现有环境下执行.()TypeScript//TypeScript是JavaScript(后缀.js)的超集(后缀.ts),包含并扩展了JavaScript的语法。它需要被编译并输出为JavaScript才能在浏览器中运行。目前很少有人使用()ProgressiveWebApp(PWA)Support//ProgressiveWebApplication()Router//vue-router(vue路由)()Vuex//vuex(vue的状态管理模式)()CSSPre-processors//CSS预处理器(eg:less,sass)()Linter/Formatter//代码风格检查和格式化(eg:ESlint)()UnitTesting//单元测试(unittests)()E2ETesting//e2e(端到端))testing在空白处选择相应的项目,选择后回车继续下一步的配置选择。构建所有配置选择项目并完成启动项目。之前vue-cli2.0启动项目是npmrundev,但是vue-cli3.0启动项目命令是npmrunserveproject构建完成后//进入构建的项目目录cdlearvuecli3.0//启动命令npmrunserve4.1启动成功4.2运行报错没有忽略错误运行时报错,报错如下VueLoaderv15现在需要配合一个webpack插件才能正确使用:查看vue-loader文档。原因好像是路由加载的问题。修改路由加载方式,改用路由懒加载。5.安装axiosnpminstallaxios--saveinmain..prototype.$axios=axios;在需要使用的*.vue页面上使用/eslint-disableno-alert,no-console///关闭eslint语法用于console和alert错误this.$axios.get("https://easy-mock.com/mock/5bfab71ae671096e7075005e/ww/vw_userlist").then(res=>gt;{console.log(res);}).catch(error=>{console.log(error);});配置vue.config.js6.1全局CLI配置文档一些@vue/cli的全局配置,例如你常用的包管理器和你本地保存的预设都存储在主目录下一个名为.vuerc的JSON文件中。您可以直接使用编辑器编辑此文件以更改保存的选项。您还可以使用vueconfig命令查看或修改全局CLI配置。vue.config.js//vue.config.jsmodule.exports={//项目部署的基本路径//默认情况下,假定您的应用程序将部署在域的根目录下//例如,https://www.vue-cli.com///如果你的应用部署在子路径下,那么这里需要指定子路径,比如你部署在https://www.my-vue.com/my-应用程序/;thenChangethisvalueto"/my-app/"publicPath:"/",//在哪里将构建文件输出到运行vue-cli-servicebuild时生成的生产环境构建文件的目录。请注意,目标目录在构建之前已清理(通过--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组件中使用模板选项,但这会给您的应用程序增加大约10kb。runtimeCompiler:false,//默认情况下,babel-loader会忽略node_modules中的所有文件。如果你想用Babel明确地转换一个依赖,你可以在这个选项中列出它。transpileDependencies:[],//如果不需要生产环境的sourcemap,可以设置为false,加快生产环境搭建。productionSourceMap:true,//是一个将接收基于webpack-chain的ChainableConfig实例的函数。允许对内部webpack配置进行更细粒度的修改。chainWebpack:()=>{},//是否为Babel或TypeScript使用线程加载器。当系统的CPU有多个内核且仅适用于生产构建时,此选项会自动启用。parallel:require("os").cpus().length>1,//将选项传递给PWA插件。//https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwapwa:{},//支持所有webpack-dev-server选项。注意:某些值如主机、端口和https可能会被命令行参数覆盖。//有些值像publicPath和historyApiFallback不要修改,因为需要和开发服务器的publicPath同步才能保证正常工作。//代理配置devServer:{host:"0.0.0.0",port:8080,//端口号https:false,//https:{type:Boolean}open:true,//配置自启动浏览器open:'GoogleChrome'-默认启动Google//proxy:'http://localhost:9000'//配置跨域处理,只有一个代理//配置多个代理proxy:{"/api":{target:"https://way.jd.com",//目标主机ws:true,//ProxyWebSocketschangeOrigin:true,//需要虚拟主机站点pathRewrite:{"^/api":""}}}},//3rdpartypluginoptions//这是一个不做任何模式验证的对象,所以它可以用来传递任何3rdparty插件选项。pluginOptions:{}};6.2配置跨域代理当页面需要请求数据与后台交互时,经常会出现跨域问题。不去处理,就无法顺利调试。未配置代理时,请求接口报错。配置好代理后就可以正常请求数据了vue.config.jsdevServer:{host:"0.0.0.0",port:8080,//端口号https:false,//https:{type:Boolean}open:true,//配置自动启动浏览器open:'GoogleChrome'-默认启动谷歌//proxy:'http://localhost:9000'//配置跨域处理,只有一个代理//配置多个代理proxy:{"/api":{target:"https://way.jd.com",//目标主机ws:true,//代理WebSocketschangeOrigin:true,//需要虚拟主机站点pathRewrite:{"^/api":""}}}}主要。js全局调用//main.jsVue.prototype.HOST="/api";//调用page.vuecreated(){leturl=this.HOST+"/jisuapi/channel?appkey=5bd8b538e744ad86c9d54e081718ab7f";安慰。日志(这个。主机);this.$axios.get(url).then(res=>{console.log(res.data);this.newsData=res.data.result.result;console.log(this.newsData);}).catch(错误=>{console.log(错误r);});}或者直接在需要使用的文件中调用//callpage.vuecreated(){leturl="/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(错误=>{console.log(错误);});}7.清除浏览器默认样式normalize.cssinstallnormmailze.cssnpminstallnormalize.css使用,引入全局使用import"normalize.css.css";