全栈自我修养：使用@vue/cli搭建vue.js环境

成功，真实成功，就是愿意做别人不愿意做的事。成功，真正的成功，是愿意做别人不愿意做的事情。目录@[TOC]当你看到这篇文章的时候，我想你对如何制作一个网站很感兴趣。上一篇介绍了使用vue-cli搭建epimetheus-frontend，在一些老项目中的确如此，但是前端框架的发布就跟坐火箭一样吗？你唱完我就上台，新的一代接替旧的。今天介绍一下@vue/cli的使用。VueCLI是一个基于Vue.js快速开发的完整系统，它提供：通过@vue/cli的交互式项目脚手架。通过@vue/cli+@vue/cli-service-global进行零配置原型设计。运行时依赖项（@vue/cli-service）是：可升级；建立在具有合理默认值的webpack之上；可通过项目内配置文件进行配置；可通过插件扩展。丰富的官方插件集合，集成了前端生态系统中最好的工具。用于创建和管理Vue.js项目的全图形用户界面。VueCLI致力于标准化Vue生态系统中的工具基础。它确保各种构建工具可以基于智能默认配置顺利连接，让您可以专注于编写应用程序，而不是花费数天时间为配置问题而苦苦挣扎。同时也为每个工具提供了在不弹出的情况下调整配置的灵活性。VueCLI的介绍来自官网。文末有相应的参考地址删除代码。作为一名程序员，对于身心来说应该是一件非常愉快的事情。在之前的文档中，我们已经使用旧版本的vue-cli创建了epimetheus-frontend，第一步我们把他删除epimetheus$rm-rfepimetheus-frontend因为新旧版本的vuecli都是使用vue命令，这时候需要卸载上次安装的vue-cliepimetheus$npmuninstallvue-cli-g环境又干净了Node版本要求

VueCLI要求Node.js8.9以上（推荐8.11.0+）。安装@vue/cli在上一篇文章中，我们使用npminstall-gvue-cli完成了vue-cli作为新版本的安装。VueCLI的包名由vue-cli更改为@vue/cli。我们需要执行下面的命令安装epimetheus$npminstall-g@vue/cli安装速度还是比较慢的，可以喝杯水安装完成后可以vue--version查看版本号epimetheus$vue--version@vue/cli4.4.6创建Vue项目这里我们继续再次创建epimetheus-frontend。我们还是进入上次创建的epimetheus目录，执行vuecreateepimetheus-frontend创建一个项目。第一步会提示你选择一个preset，这里选择默认的Babel+ESLint
第二步会提示你选择packagemanager。这里我们还是选择Yarn。安装过程可能有点慢。安装完成后，下面epimetheus$vuecreateepimetheus-frontendVueCLIv4.4.6?请选择一个预设：default(babel,eslint)？安装依赖项时选择要使用的包管理器：YarnVueCLIv4.4.6?Creatingprojectin/Users/zhangyunan/project/scoding/epimetheus/epimetheus-frontend.?正在初始化git存储库...??安装CLI插件。这可能需要一段时间....yarninstallv1.15.2info未找到锁定文件。[1/4]？正在解析包...成功保存lockfile.info要升级，请运行以下命令：$curl--compressed-o--Lhttps://yarnpkg.com/install.sh|bash?在30.95秒内完成。？调用生成器...？安装额外的依赖项...yarninstallv1.15.2[1/4]？解决包。..[2/4]？正在获取包...[3/4]?链接依赖项...[4/4]?构建新包...成功保存锁定文件。?在5.79秒内完成。?运行完成挂钩......？正在生成README.md...？成功创建项目epimetheus-frontend.?通过以下命令开始：$cdepimetheus-frontend$yarnserve从上面的提示中我们看到默认创建了一个git项目。根据最后的提示，我们可以进入epimetheus-frontend，在上面运行yarnserve控制台开始运行我们的项目epimetheus$cdepimetheus-frontendepimetheus/epimetheus-frontend$(master)yarnserveyarnrunv1.15.2$vue-cli-serviceserveINFO启动开发服务器...发出CopyPlugin后98%完成在2275毫秒内成功编译10:13:29PM应用运行于：-本地：http://localhost:8080/-网络：http://192.168.1.4:8080/请注意，开发版本未优化。要创建生产构建，请运行yarnbuild。从控制台信息可以看出，访问路径为：http://localhost:8080，至此准备工作基本完成，项目结构建立后，相信代码命令已经可以在开发中使用了上一个文档。如果还是不能使用，可以按照下面的提示进行安装。这里我们直接使用代码。打开当前目录，例如：epimetheus/epimetheus-frontend$code。当前文件夹epimetheus/epimetheus-frontend在VSCode中打开。安装VSCode后，使用code命令时，提示notfund。可以通过查看->命令面板输入代码安装【外链图片传输失败，源站可能有防盗链机制，建议保存图片直接上传（img-jvkCJ2Uz-1593393770883）（img/vscode_install_code.png)]这里使用VSCode，打开项目后如图：├──README.md#默认README文件├──babel.config.js├──package.json#buildscriptsanddependencies├──public│├──favicon.ico│└──index.html#index.htmltemplate├──src│├──App.vue#主应用组件│├──assets#模块资产││└──logo.png│├──components││└──HelloWorld.vue│└──main.js#应用入口文件└──yarn.lockvue-cli3.0修改端口号其中，我们主要修改src下的文件。上面提到的项目访问端口是：8080，为了防止和其他项目冲突，这里我们把端口改成：7000，有两种方式：package.json文件修改--port"scripts":{"serve":"vue-cli-serviceserve--port7000",}在package.json同级下创建vue.config.js，添加如下内容module.exports={devServer:{port:7000}}可以在双向。elementUI这里使用官网：http://element-cn.eleme.io/#/...这里我们进入刚才的项目目录：并执行yarnaddelement-uiandconfiguremain.jsimportVuefrom'vue'从'element-ui'导入ElementUI；导入'element-ui/lib/theme-chalk/index.css'；从'./App.vue'导入AppVue.use(ElementUI);Vue.config.productionTip=falsenewVue({render:h=>h(App),}).$mount('#app')安装VuexVuex是一个Vue.js应用开发的状态管理模式，采用集中存储的方式管理应用所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex也被集成到Vue官方调试工具devtoolsextension中，提供零配置穿越调试、状态快照导入导出等高级调试功能。也就是说，通过Vuex，各个组件可以实时共享状态。官网：https://vuex.vuejs.org/zh-cn/...安装首先我们来安装yarnaddvuex配置先在src下创建store文件夹，并在其下创建store.js文件，即src/store/store.js，同时创建src/assets/util/cookie.jssrc/assets/utils/cookie.js文件内容。这个文件主要是用来操作cookieletcookie={setCookie(cname,value,expiredays){letexdate=newDate()exdate.setTime(exdate.getTime()+expiredays)exdate.setDate(exdate.getDate()+expiredays)　document.cookie=cname+'='+escape(value)+((expiredays==null)?'':';expires='+exdate.toGMTString())},getCookie(name){让reg=newRegExp('(^|)'+name+'=([^;]*)(;|$)')letarr=document.cookie.match(reg)if(arr){return(arr[2])}else{returnnull}},delCookie(name){letexp=newDate()exp.setTime(exp.getTime()-1)letcval=cookie.getCookie(name)if(cval!=null){document.cookie=名称+'=;到期=1970年1月1日星期四00:00:01GMT；'}}}导出默认cookiesrc/store/store.js这里的内容定义了userInfo，用来保存当前用户的信息，包括名称和tokenimportVuefrom'vue'importVuexfrom'vuex'importcookiefrom'../assets/utils/cookie'Vue.use(Vuex)constuserInfo={name:cookie.getCookie('name')||'',令牌:cookie.getCookie('令牌')||''}conststore=newVuex.Store({state:{userInfo:userInfo},mutations:{setUserInfo(state){state.userInfo={name:cookie.getCookie('name'),token:cookie.getCookie('token'),}}}})exportdefaultstoreinmain.js添加Vuex配置，importVuefrom'vue'importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';从'./store/store'导入商店'从'./App.vue'导入应用程序Vue.use(ElementUI);Vue.config.productionTip=falsenewVue({store,render:h=>h(App),}).$mount('#app')为浏览器安装基于axiosPromise的HTTP客户端，node.jsaxios是一个Promise-基于http客户端，我们通过它与后端交换数据。如果不喜欢，可以改用jquery的ajax。让我们安装yarn添加axios最后main.jsimportVuefrom'vue'importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importstorefrom'./store/store'importAppfrom'./App.vue'Vue.use(ElementUI);Vue.config.productionTip=falsenewVue({store,render:h=>h(App),}).$mount('#app')githubhttps://github.com/zhangyunan...参考@vue/cli:https://cli.vuejs.org/zh/guide/