装置版本npm install -g @vue/cliyarn global add @vue/clivue --version 查看版本
如果呈现上面状况1、如果应用npm装置，应用命令npm root -g查看npm包的地位2、如果应用yarn装置，应用命令yarn global dir查看yarn装置的地位3、关上环境变量中的零碎变量，找到path变量进行编辑增加
创立我的项目vue create mall //（创立名称为mall的我的项目）cd mallyarn add axiosyarn add vue-routeryarn add vuex在main.js文件中增加
import axios from 'axios'import VueRouter from 'vue-router'import Vuex from 'vuex'Vue.prototype.$axios = axios;Vue.use(VueRouter)Vue.use(Vuex)装置vue-devtools拓展工具vue-devtools官网点击关上，下载master上的代码解压进入此目录执行命令npm installnpm run build再通过浏览器的扩大程序进行加载shell/chrome
跨域计划1、通过CORS进行跨域（后端批改）2、通过jsonp进行跨域
import jsonp from 'jsonp'jsonp('https://www.imooc.com/common/adver-getadver',(err,res)=>{ console.log(res)})3、接口代理-通过批改nginx服务器配置来实现
jsonp('/api/activity/servicetime',(err,res)=>{ console.log(res)})新建vue.config.js文件，与package.json同级
module.exports = { devServer:{ host:"localhost", port:8080, proxy:{//事件代理 '/api':{ target:'https://www.imooc.com', changeOrigin:true, pathRewrite:{ '/api':'' } } } }}插件装置//装置图片懒加载、element-ui、sass、轮播yarn add vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookiestorage封装storage自身有api，然而只是简略的key/value模式storage只存储字符串，须要手工转化成json对象storage只能一次性清空，不能单个清空/** * Storage封装 */ const STORAGE_KEY = 'mall';export default { // 存储值 setItem(key, value, module_name) { if (module_name) { let val = this.getItem(module_name); val[key] = value; this.setItem(module_name, val); } else { let val = this.getStorage(); val[key] = value; window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val)); } }, // 获取某一个模块上面的属性user上面的userName getItem(key, module_name) { if (module_name) { let val = this.getItem(module_name); if (val) return val[key]; } return this.getStorage()[key]; }, getStorage() { return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}'); }, clear(key, module_name) { let val = this.getStorage(); if (module_name) { if (!val[module_name]) return; delete val[module_name][key]; } else { delete val[key]; } window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val)); }}接口谬误拦挡import Vue from 'vue'import App from './App.vue'import axios from 'axios'import VueAxios from 'vue-axios'import VueRouter from 'vue-router'import Vuex from 'vuex'import router from './router.js'//依据前端的跨域形式做调整axios.defaults.baseURL = '/api';axios.defaults.timeout = 8000;//接口谬误拦挡axios.interceptors.response.use(function (response){ let res = response.data; if(res.status == 0){//接口胜利返回的状态值为 0 return res.data }else if(res.status == 10){//未登录接口返回的状态值为 10 window.location.href = '/#/login' }else{ alert(res.msg); }})Vue.config.productionTip = falseVue.use(VueRouter)Vue.use(Vuex)Vue.use(VueAxios, axios)new Vue({ router, render: h => h(App),}).$mount('#app')