《从零构建前后分离的web项目》练习-5分钟快速搭建炸鸡规格的VUE项目骨架Scaffolding我一般都是使用cli生成项目骨架，然后基于它进行个人修改。什么是CLI命令行界面（英文：command-lineinterface，缩写：CLI）是图形用户界面普及之前使用最广泛的用户界面，通常不支持鼠标，用户通过键盘输入命令,计算机收到命令,执行。有人称之为字符用户界面。顾名思义，XXX-CLI就是使用命令行生成的XXX程序。之前写过一篇基于nodeJs制作个性化CLI的教程。如何使用node开发自己的cli工具并发布到npm。如果你想了解更多的制作过程，你可以简单地看一看。截至2018-09-02，vue-cli最新版本为3.0。vue的中文生态非常完善。直接去官网看看：https://cli.vuejs.org/zh/vue-cli2vs.vue-cli3对比可惜vue-cli-3是2018-08-11出来的，我的论坛很久以前就开始搭建cli-3，花了我一些时间，后面会提到。看一下vue-cli3的新特性：可以生成pwa，支持UI界面，勾选，兼容cnpm。自己创建了一套vue-cli-service如下：这两天闲的时候在考虑项目兼容vli-3但是后来浪费了很多时间，效果是仍然不理想。我回滚了代码并宣布我放弃了。鉴于使用cli-3并没有提升我项目的性能，而是翻遍了我很多成熟的基础设施。考虑到时间成本，我决定使用cli-2进行开发，目录结构大体相同。的。在安装vue-cli之前，需要注意先决条件，以免浪费不必要的时间。VueCLI需要Node.js8.9或更高版本（推荐8.11.0+）。（如果你像我一样使用cli-2，就不需要这么新的nodeJs）你可以使用nvm或者nvm-windows在同一台电脑上管理多个Node版本。别走远，官网比我说的好多了。可以用yarn或者npm安装npminstall-g@vue/cli#ORyarnglobaladd@vue/cli我再用npm试试（如果对npm速度不满意，可以试试淘宝的CNPM，不要依赖toomuchoncnpm):localhost:~Venda-GM$sudocnpmi@vue/cli-gTIPSnpminstall可以写成i，-g可以放在任意位置，--save可以写成-S，--save-dev可以写成-D看到这个画面，安装完成。测试版本是否正确，ok创建项目：vuecreatenew-bee拉取2.x模板（旧版本）VueCLI3和旧版本使用相同的vue命令，所以VueCLI2（vue-cli)替换为覆盖。如果你还需要使用老版本的vueinit功能，可以全局安装一个桥接工具：npminstall-g@vue/cli-initvueinitwillworksameasvue-cli@2.xvueinitwebpackmy-project#这是生成*cli-2*项目的方法使用vue-cli-2生成项目vueinitwebpacknew-bee以下是我创建项目时选择的选项：先说下面三个:推荐使用vue构建的方式在运行时+编译时，通常需要webpack来编译.vue模板。是否选择预置Eslint并不适合所有人。有些要求太严格了。我有一套成熟的。代码在这里，所以我将使用我自己的。当然，也可以在其基础上做一些删减。它将帮助我们执行安装。如果你有一个好的套接字终端代理，你可以使用这个，否则你可以选择否。使用cnpm执行目录结构的第一眼。我们来看看vue-cli2自动生成的项目目录。我会给它贴上标签。对于可能不理解的同学，简单描述一下我们这次重构的主要目的是为了标准化，更适合多模块多人协作，而不是让它看起来更复杂。本文的项目结构、esLint改进等，都是经过项目组反复推敲和决策，具有一定的生产价值。毫无根据的担心：为电子做好准备。cli生成的项目src直接在源码下面，但是为了以后考虑使用electron，我们会用renderer进行包装，并进行标准化。可以参考electron-vue的Electron兼容源码目录提示：上面截图中github树目录的插件是octotree。也可以直接在谷歌商店搜索安装，看源码省很多时间。不要先创建electron的主文件夹和index.ejs。您需要添加依赖项，这些依赖项暂时不可用。别忘了修改webpack相关的路径问题加上renderer路径app:'./renderer/src/main.js'@webpack中也要修改路径，否则会找不到组件，需要changethewebpackalias[alias]配置改变后，alias:{'@':resolve('renderer/src'),}容器级目录创建在组件目录（components）同级目录（components）：每个模块在容器中是分开的，这样可以让项目模块看起来更清晰。如果一个项目超过十个人协作，可以很好地划分工作区域，合理建立路由，避免不必要的冲突。以当前论坛项目为例，调整路由目录的规范。在/router=()=>import(/*webpackChunkName:"blog"*/'@/container/blog/index')/*container/blog目录下的所有路径下为/container/blog创建一个blog.jsconstBlog在这个route下配置children，避免混淆*/letroutes=[{path:'/blog',name:'blog',component:Blog,children:[{path:'blogdemo',component:Blog}]}]export{routes}//注意/*webpackChunkName:"blog"*///用于后面路由的懒加载，后面会讲到，不懂没关系，可以忽略现在自动生成的index.js主路由有以下缺点：过于单一，我们不能把所有的路由都写在里面作为children，看起来很混乱，难以应对开发调试，多人协作很容易引起冲突。让我们尝试导入blog.js。首先，我们将导入blog.js导出的路由并创建一个别名以防止冲突。import{routesasblogRoutes}from'./blog'因为可能有超过N个路由模块，所以我们将路由拆分自动生成就这么简单：//直接exportrouteexportdefaultnewRouter({routes:[{path:'/',name:'HelloWorld',component:HelloWorld}]})我们把它拆分成这样：//定义基本路由letroute=[{path:'/',name:'HelloWorld',component:HelloWorld}]//等等轻松链接更多路由route=route.concat(blogRoutes)//exportexportdefaultnewRouter({routes:route,linkActiveClass:'active'})后面，我们给博客添加一些内容/index.vue，测试一下：{{msg}}
