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"//})//]//},}
