当vue3.0开始流行的时候，我也收到消息说以前使用vue2.0的各种依赖包在以后的更新中将不再适用于老版本的vue，所以在新项目使用vue3.0版本，以下是vue3.0配置的基本功能安装1.安装vue3.0npminstall-g@vue/clioryarnglobaladd@vue/cli查看版本：vue-Vdisplay应该是3.0以上版本2、创建项目2.1代码创建vuecreateXXX(项目名称)默认是使用默认配置手动选择features是自定义配置2.2界面创建vueui自动打开浏览器显示界面（有的浏览器没有支持显示）新建Project：使用：npmrunserve启动程序1.使用vuex1.1按照2.0的使用方法：按照2.0原来的方法，把vuex分成四个文件：state.js，mutation.js。js、getter.js和action.js对vuex进行更改。在main.js中声明store以供全局引用：importstorefrom"./store/index";Vue.prototype.$store=商店；写法同2.0方法。1.2按照3.0使用：原理：和2.0一样，只是把4个文件放在一起，可以直接拆分或修改文件。state.js:conststate={test:''//这是一个测试数据}exportdefaultstate;mutation.jsconstmutations={changeTest(state,payload){state.test=payload.test;}}导出默认突变；getter.jsconstgetters={getTest(state){returnstate.test;}}exportdefaultgetters;action.jsconstactions={changeTest(store,payload){store.commit({type:'changeTest',test:payload})}}exportdefaultactions;index.js--------整合对应的四个文件importVuefrom'vue';importVuexfrom'vuex';importactionsfrom'./action';从'./getter'导入吸气剂；从'./mutation'导入突变；从'./state'导入状态；Vue.use(Vuex)；导出默认新Vuex.Store({state,actions,getters,mutations});2、跳转也在main.js文件中声明：importrouterfrom"./router";（安装项目时，如果手动选择router，则无需手动添加声明）3、这里的数据请求使用2.0的数据请求方式：3.1将2.0框架中的services文件夹复制到src文件夹下。3.2下载对应的ajax依赖。cnpminstallaxios--save3.3新建目录services配置axios文件------前端跨域importaxiosfrom'axios'；从'../config'导入baseUrl；//这里是一个文件作为所有请求的baseip地址//添加请求拦截器varCancelToken=axios.CancelToken;varsource=CancelToken.source();axios.interceptors.request.use(function(config){if(config.method==='post'||config.method==='put'||config.method==='delete'){//POST参数序列化//console.log(config.data);//config.data=Qs.stringify(config.data);//config.data=Qs.stringify(config.data);}returnconfig;},function(error){//预处理请求错误(error)returnPromise.reject(error);});//添加响应拦截器axios.interceptors.response.use(function(response){//预处理响应数据(response)如果数据中有不需要的部分，则拦截//console.log(response)returnresponse;},function(error){//预处理响应error(error)//alert(error);returnPromise.拒绝（错误）；}）；exportdefaultfunction(url,{//不传,默认参数method='get',timeout=180000,data={},cancelToken='',headers={'Content-Type':'application/json'},//application/x-www-form-urlencoded;字符集=UTF-8；responseType='json'}){constconfig={method:method,timeout:timeout,url:url,//如果URL完整且包含域名，下面的域名将不会被拼接baseURL:baseUrl.URL_CNODEJS,//域名可以在最外层的config.js中修改,request目标服务器域名配置，结合我们自己的项目，就是在项目放置服务器数据时将域名替换为192.168.1.3：data,canelToken:cancelToken,//关闭请求headers:headers,responseType:responseType};returnaxios(config);}config.js//请求目标服务器域名配置constDOMAIN_NAME={URL_CNODEJS:'http://192.168.1.155:8040'//测试环境};exportdefaultDOMAIN_NAME;server.js-----和axios文件在同一个目录，这里写所有请求importaxiosfrom'../services/axios';constserver={getTest(){returnaxios('bservice/test',{method:'get'})}}exportdefaultserver;3.4在main.js文件中引入：importserverfrom'../src/services/server';Vue.prototype.$server=server;3.5使用this.$server.getTest().then((res)=>{//请求测试console.log(res.data)}).catch(err=>{console.log(err.message);})四、打包由于vue-cli项目中没有config文件夹，所以需要在根目录下创建vue.config.js设置打包路径:网上有很多推荐的配置，你可以找一个配置文件进行测试，我使用了如下文件：module.exports={baseUrl:'./',outputDir:'dist',lintOnSave:true,runtimeCompiler:true,//重点在这里//调整webpack内部配置//见https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.mdchainWebpack:()=>{},configureWebpack:()=>{},//配置webpack-dev-server行为。devServer:{open:process.platform==='darwin',host:'0.0.0.0',port:8080,https:false,hotOnly:false,//参见https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理proxy:null,//string|之前的对象：app=>{}}}5.注意路径：@表示src文件夹（/node_modules/已经在@vue/cli-service/lib/config/base.js中配置了@路径）
