全栈修身：环境搭建

不是所有漂泊的人都会迷路。流浪者并非全都迷路了。上一篇全栈修身：001环境搭建（使用Vue、SpringBoot、Flask、Django完成Vue前后端分离开发）全栈修身：002使用@vue/cli搭建一个全栈vue.js环境自我修养：003Axios的简单使用看到这篇文章，你暂时认为自己对如何做网站感兴趣。前言本系列文章将从一个完整的项目是如何开发的过程开始写的，期间会涉及到前端、后端以及一些运维方面的知识。本文将通过一个项目（一个前端项目对应三个后端项目）集成全栈自我修炼，完成一个简单的DEMO。前端项目使用Vue.js，本项目将使用vue、vuex、vue-route、axios、elementUI等后端项目作为三个项目，涉及SpringBoot、Mybaits、Flask等。中间会穿插一些运维知识，比如常用的linux命令，Jenkins等，也会介绍一些工具的使用方案。以下项目：epimetheus-frontend，面向用户的PC前端项目epimetheus-management-frontend，面向运营商的内部管理系统前端项目epimetheus-miniapp-frontend，小程序前端项目epimetheus-backend，对应后端epimetheus-management-backend端epimetheus-miniapp-backend对应第一篇文章后端环境的准备，这里主要介绍vue环境的准备。nodejs可以根据实际情况下载对应的版本官网地址：https://nodejs.org/zh-cn/down...安装完成后在控制台输入：node-v即可知道安装的nodeversion，使用npm-v查看npm版本node-vv14.4.0npm-v6.14.5vue-cli如果以上已经验证安装正确安装好node和npm后，使用npminstall-gvue-cli完成安装vue-cli并创建一个Vue项目。给项目命名一直是第一个困扰我的问题。本次项目暂定名为epimetheus-frontend，使用vue-cli命令生成项目。命令格式为：vueinitwebpackVue-Project，这里是vueinitwebpackepimetheus-frontend，先找一个有代码的文件夹，这里先新建一个epimetheus文件夹，进入epimetheus文件夹，执行vueinitwebpackepimetheus-frontend填入根据提示项目信息：？项目名称epimetheus-frontend?项目介绍nVue.js项目？作者yunan.zhang?Vue独立构建？安装vue路由器？是的？使用ESLint来检查你的代码？是的？选择一个ESLint预设标准？设置单元测试是？选择一个测试运行器笑话？使用Nightwatch设置端到端测试？是的？我们应该在项目创建后为您运行`npminstall`吗？(推荐)yarn注意上面选择的是yarn而不是npm，这里是使用npm还是yarn，没有要求，两个功能都可以使用，只是命令略有不同。yarn和npm命令对照表pure-lockfilenpminstall[package](N/A)npminstall--save[package]yarnadd[package]npminstall--save-dev[package]yarnadd[package][--dev/-D](N/A)yarnadd[package][--peer/-P]npminstall--save-optional[package]yarnadd[package][--optional/-O]npminstall--save-exact[package]yarnadd[package][--exact/-E](N/A)yarnadd[package][--tilde/-T]npminstall--global[package]yarnglobaladd[package]npmrebuildarninstall--forcenpmuninstall[package](N/A)npmuninstall--save[package]yarnremove[package]npmuninstall--save-dev[package]yarnremove[package]npmuninstall--save-optional[package]yarnremove[package]npmcachecleanyarncachecleanrm-rfnode_modules&&npminstallyarnupgrade安装过程可能会有点慢，安装完成后如下#项目初始化完成！#=========================开始：cdepimetheus-frontendnpmrundevDocumentation可以在https://vuejs-templates.github.io找到/webpack此时，我们可以进入epimetheus-frontend，在控制台运行npmrundev开始运行我们的项目epimetheus$cdepimetheus-frontendepimetheus/epimetheus-frontend$npmrundev>epimetheus-frontend@1.0.0dev/Users/zhangyunan/project/scoding/epimetheus/epimetheus-frontend>webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js13%buildingmodules29/31modules2active...theus/epimetheus-frontend/src/App.vue{parser:"babylon"}isd弃用；我们现在将其视为{parser:"babel"}。95%emittingDONECompiledsuccessfulin2886ms1:49:57pmIYourapplicationisrunninghere:http://localhost:8080从控制台信息可以看出，访问路径为：http://localhost:8080，准备工作基本完成。这里项目结构是用VSCode开发的，也可以用Webstorm，都可以。使用VSCode时，可以直接在终端中使用code命令打开VSCode中的执行文件或目录，例如：epimetheus/epimetheus-frontend$code。它将在VSCode中打开当前文件夹epimetheus/epimetheus-frontend。安装VSCode后如何使用code命令提示notfund，可以在View->CommandPanel中输入code安装。这里使用VSCode。打开项目后如图所示：├──build/#webpackconfigfiles│└──...├──config/│├──index.js#mainprojectconfig│└──...├──src/│├──main.js#应用入口文件│├──App.vue#主应用组件│├──components/#ui组件││└──...│└──assets/#模块资产（进程dbywebpack)│└──...├──static/#纯静态资产（直接复制）├──.babelrc#babel配置├──.editorconfig#编辑器的缩进、空格/制表符和类似设置├────.eslintrc.js#eslint配置├──.eslintignore#eslint忽略规则├──.gitignore#gitignore的合理默认值├──.postcssrc.js#postcss配置├──index.html#index.html模板├──package.json#构建脚本和依赖└──README.md#默认README文件其中，我们主要修改src下的文件。上面提到的项目访问端口为：8080，为了防止和其他项目冲突，端口改为：7000，具体配置使用config/index.js文件中的elementUI这里我们使用官网：http://element-cn.eleme.io/#/...这里我们进入刚才的项目目录：并执行yarnaddelement-uiepimetheus/epimetheus-frontend$yarnaddelement-uiyarnaddv1.15.2[1/5]?正在验证package.json...[2/5]？正在解析包...[3/5]?正在获取包...[4/5]？链接依赖项...[5/5]?构建新包...成功保存lockfile.success保存6个新的依赖项.info直接依赖项└─element-ui@2.13.2info所有依赖项├─async-validator@1.8.5├─deepmerge@1.5.2├─element-ui@2.13.2├─normalize-wheel@1.0.1├─resize-observer-polyfill@1.5.1└─throttle-debounce@1.1.0?在8.36秒内完成。在main.js中配置如下内容：importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);newVue({el:'#app',render:h=>h(App)});配置后的main.js文件为：importVuefrom'vue'importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'importAppfrom'./App'importrouterfrom'./router'Vue.config.productionTip=falseVue.use(ElementUI)/*eslint-disableno-new*/newVue({el:'#app',router,render:h=>h(App),components:{App},template:''})configureVuexVuex是专门为Vue.js应用开发的状态管理模式它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex也被集成到Vue官方调试工具devtoolsextension中，提供零配置穿越调试、状态快照导入导出等高级调试功能。即通过Vuex，各个组件可以实时共享状态。官网：https://vuex.vuejs.org/zh-cn/...安装首先我们安装一下yarnaddvuexepimetheus/epimetheus-frontend$yarnaddvuexyarnaddv1.15.2[1/5]?正在验证package.json...[2/5]？正在解析包...[3/5]?正在获取包裹...[4/5]?链接依赖项...[5]/5]？构建新包...成功保存lockfile.success保存1个新的dependency.info直接依赖└─vuex@3.4.0info所有依赖└─vuex@3.4.0?在5.33秒内完成。配置首先在src下创建store文件夹，在其下创建store.js文件，即src/store/store.js，并创建src/assets/util/cookie.jssrc/assets/utils/cookie.js文件内容。这个文件主要用来操作cookieletscookie={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=name+'=;expires=1970年1月1日星期四00:00:01GMT；'}}}exportdefaultcookiesrc/store/store.js这里的内容定义了userInfo，用于保存当前用户信息，包括名称和tokenimportVuefrom'vue'importVuexfrom'vuex'importcookiefrom'../assets/util/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'),}}}})exportdefaultstore在main.js中添加Vuex配置,importVuefrom'vue'importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'从'./App'导入应用程序从'./router'导入路由器'从'./store/store'导入商店Vue.config.productionTip=falseVue.use(ElementUI)/*eslint-disableno-new*/newVue({el:'#app',router,store,render:h=>h(App),components:{App},template:''})为浏览器配置基于axiosPromise的HTTP客户端，node.jsaxios是一个基于Promise的http客户端，我们通过它与后端交换数据。如果你不喜欢它，你可以使用jquery的ajax代替。让我们安装epimetheus/epimetheus-frontend$yarnaddaxiosyarnaddv1.15.2[1/5]？正在验证package.json...[2/5]？正在解析包...[3/5]?正在获取包...[4/5]?链接依赖项...[5/5]?Buildingfreshpackages...successSavedlockfile.successSaved2newdependencies.infoDirectdependencies└─axios@0.19.2infoAlldependencies├─axios@0.19.2└─follow-redirects@1.5.10?在4.39秒内完成修改main.js文件并添加import'./axios_config/'importAxiosfrom'axios'Vue.prototype.$http=Axiosgithubhttps://github.com/zhangyunan...参考nodejs:https://nodejs.orgvue:https://vuejs.org/vuex:https://vuex.vuejs.org/vue-route:https://router.vuejs.org/elementUI:http://element-cn.eleme.io/#/...axios:https://github.com/axios/axios