Vue-cli3.0是一个基于webpack4.0的vue脚手架工具。得益于webpack4.0的零配置特性，在使用vue-cli3.0时，可以零配置开发打包vue项目。vue-cli3.0和之后的版本为了区别vue-cli1.0和vue-cli2.0，名称改为@vue/cli。如果你的电脑已经安装了vue-cli2.0，需要先卸载，再安装@vue/cli，不用担心高版本的vue-cli不兼容旧项目。例如，使用vue-cli2.0创建的项目可以分别使用npmrundev和npmrunbuild来启动和打包。vue--version//查看电脑安装的vue-cli版本npmuninstallvue-cli-g//卸载旧版本vue-clinpminstall-g@vue/cli//安装3.0版本的vue-climac电脑卸载安装vue-cli如下：sudochmod-R777/usr/local/lib/node_modules///放开权限sudonpmuninstallvue-cli-g//卸载旧版本sudonpminstall-g@vue/cli//安装新版本，在cmd中输入vueui，启动项目管理器，新建一个vue项目。这个过程需要的步骤是：1.新建一个项目文件夹-vue-base-frame2。选择包管理器-npm3。初始化git仓库默认打开4.选择一组预设-选择manual5.babel-打开6.Router-打开7.Vuex-打开8.CSSPreprocessors（css预处理器）-打开9.使用配置文件-打开10.选择一个css预处理器下拉选择less11。选择一个linter/formatter配置下拉并选择eslint+standardconfig12。save-Open13上的Lint。然后点击“Createproject,don'tsavepresets”经过以上步骤，就可以等待vue基础模板下载完成了。模板下载完成后，cmd进入项目根目录，执行npmrunserve启动项目，类似vu在e-cli2.x版本中，npmrundev的启动方式有所不同。启动完成后，浏览器打开这个项目，可以看到Home和About两个简单的页面。接下来需要修改vue模板。修改之后在此之前，我先介绍一下。项目中每个文件的作用都是从项目的根目录开始的。package.json项目配置文件主要有三个文件。这里会说明项目中需要的依赖。当别人想使用你有这个项目的时候，只需要执行npminstall安装这些依赖，启动项目即可。这里分析一下json文件中的dependencies和devDependencies。dependencies声明了构建环境需要的依赖，即项目打包后，这些依赖也必须打包。是的，而devDependencies代表的是开发环境的依赖，也就是你开发时加载的一些依赖。这些依赖在项目打包的时候不会放到public文件夹中。public文件夹在vue-cli2.x创建的项目模板中，也就是静态文件夹。在vue-cli3.x创建的项目模板中，被这个public文件夹代替。里面有个index.html文件，提供给webpack让它运行打包。在最终工程中作为模板文件生成index.htmlsrc文件夹。这是项目的主文件夹。以后我们的开发都是在这个文件夹中完成的。我们看一下src主文件夹下的文件：assets存放项目中的静态资源文件，比如图片、图标、字体文件等components从代码中提取一些可复用的逻辑，形成一个组件，这样我们就可以复用views项目中的页面，放在这个文件夹下main.js项目的入口文件，App.vue项目中的基础组件（根组??件），项目开发时会以此为起点，runorcompiled对于初始vue模板的所有指令，这里提醒一下，因为在启动vueui（项目管理器）上开启了eslint代码检查，这里防止你以后写代码老是报空格和换行错误，需要找到根目录下的.editorconfig文件和.eslintrc.js文件，修改//.editorconfig.js[*.{js,jsx,ts,tsx,vue}]indent_style=spaceindent_size=4//将本项目默认的2改成4trim_trailing_whitespace=trueinsert_final_newline=true//.eslintrc.jsrules:{'indent':['error',4],//添加这行代码'no-控制台'：process.env.NODE_ENV==='生产'？'警告'：'关闭'，'无调试器'：process.env.NODE_ENV==='生产'？'警告'：'关闭'}vue。config.js文件，你会发现vue-cli3.x创建的项目中没有这个文件，因为一开始我讲了基于webpack4.0feature0的配置特性，在使用vue-cli3.0的时候创建一个项目，webpack配置的配置是隐藏的，老版本的vue-cli，创建的项目，我们可以找到build和config这两个文件夹，但是vue-cli3.x创建的项目已经没有了这两个文件夹，当需要覆盖原来的配置时，需要在根目录新建一个vue.config.js文件来配置新的配置。项目启动时会自动加载vue.config.js//vue.config.js/*如果当前生产环境为production如果项目部署到域名根目录（www.baidu.com），直接'/':'/'，如果需要部署到(www.baidu.com/iview-admin)目录，直接'/iview-admin/':'/'如果是开发环境，直接'/':'/'*/constBASE_URL=process.env.NODE_ENV==='生产'?'/iview-admin/':'/'/*引入节点的路径模块*/constpath=require('path')/*自定义方法resolve*/constresolve=dir=>{returnpath.join(__dirname,dir);}//引入webpack//constwebpack=require('webpack')module.exports={lintOnSave:false,//关闭eslint检查/*webpack配置*/chainWebpack:config=>{config.resolve.alias.set('@',resolve('src'))//使用@而不是src，当你需要在项目中导入文件时，你只需要@/api,@/config,@/mock....set('_c',resolve('src/components'))//使用_c而不是src/components，当我们需要导入组件时，只需要_c/HelloWorld.vue},//打包时不生成map文件，减少打包体积，加快打包速度productionSourceMap:false,//跨域配置devServer:{/*自动开启浏览器*/open:true,hot:true,//vuecli3.0关闭热更新//liveReload:false,//webpackliveReload关闭/*设置为0.0。0.0所有地址都可以访问*/host:'0.0.0.0',port:4000,//proxy:'http://localhost:4000',//告诉开发服务器发送任何未知的请求（不匹配静态文件请求），所有都被代理到这个url以满足交叉域请求},//configureWebpack:{//插件:[//newwebpack.ProvidePlugin({//$:"jquery",//jQuery:"jquery",//"windows.jQuery":"jquery"//})//]//},}
