搭建vue项目项目从vue-cli入手，含全家桶（vue-cli+vue3.0+vuex+vue-router+axios+element-ui），包括自定义方法等，Laity将在本文中展示详细过程。我将新创建的项目放入我的库中。如果需要，可以chttps://github.com/webwjg/newVue.git1。下载vue-cli，在命令窗口输入（shift+右键）：npminstall-g@vue/cli稍等片刻，然后开始在你想要的目录下创建vue项目，或者在命令窗口输入:vuecreateyounameyouName是你自己定义的项目名（不能有大写字母），然后会出现default，Manuallyselectfeatures是手动设置，我选择手动设置，键盘上下键可以选择，空格栏是确认选择。这个是我选的，看个人需要，然后①。选择ESLint+PrettierESLintwitherrorpreventiononlyESLint+AirbnbconfigESLint+StandardconfigESLint+Prettier选择ESLint+Prettier。②.选择语法检查方法，>toinvertselection)>(*)Lintonsave//checkonsave()Lintandfixoncommit//fixandcommitsavehereselectsaveandcheck。③.配置文件存储位置你更喜欢把Babel、ESLint等的配置放在哪里？Indedicatedconfigfiles//独立文件放置Inpackage.json//Inpackage.json我这里选择Inpackage.json。在那之后，你可以一直继续下去。给大家展示一下我的项目结构：组件是主页面，视图写子组件。2.配置首先下载你需要的，因为你在创建项目的时候已经下载了vue-router和vuex，你只需要下载axiosnpminstallaxios下载成功，刷新package.json，会有版本信息注意，当你定义了一个变量或者组件，但是如果你不使用它，就会报错。我们需要修改配置，在package.json的"rules"中添加"vue/no-unused-components":"off","no-unused-vars"":[0,{"vars":"all","args":"after-used"}]①.vue-router新建一个组件，然后到router下的index.js中去注册！【这里插入图片描述】(//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/438175658d3f410e9ed3aa6a314e8249~tplv-k3u1fbpfcp-zoom-1.image)注意配置中path的值是自定义的，可以和导入的名称不同，但是是名称和组件最好和导入时的名称保持一致路由参数//跳转参数this.$router.push({path:'/model',query:{page:'1',code:'6666'}});//model组件接收this.$route.query.codethis.$route.query.page②.vuex项目中第一个store是vuex，在创建项目的时候已经自动配置好了，所以我们可以使用它直接。教你粗略的使用vuex，看一个简单的存储数组exportdefaultnewVuex.Store({state:{myarr:[],},mutations:{storeArr(state,myarr){//state就是上面的状态，myarr是来自component.myarr=myarr;},},actions:{},modules:{}})组件中的状态：数据数组）；},这只使用同步的突变。如果你想异步执行它们，你必须使用动作。在组件中：exportdefault{name:'HelloWorld',props:{msg:String},data(){return{userPhone:'19999999999',}},methods:{storePhone:function(){this.$store.dispatch("asyncStore",this.userPhone)},}}如果想获取state中的值，可以使用this.$store.state.phone;③.axiosaxios默认为application/json。如果使用这种编码方式，会把序列化后的json串传给后台，而我们发送的格式不是对象，这是很不对的。舒服的。让我告诉你我的愚蠢方法，从main.js中的'axios'导入axiosaxios.defaults.transformRequest=[function(data){letobj=''for(letitemindata){obj+=encodeURIComponent(item)+'='+encodeURIComponent(data[item])+'&'}returnobj}]Vue.prototype.$axios=axios发送请求：letdata={a:1,b:2};this.$axios.post('/url',data).then((res)=>{console.log(res)})这个符合我的使用习惯。⑤.element-ui第一步当然是下载npminstallelement-ui，没错，卸载就是把install改成uninstall然后到main.js中引入importElementUIfrom'element-ui'；Vue.use(ElementUI);使用的可以到官网去c代码，放到自己的项目中。示例：
