《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

kel 发布于2019-08-19 11:10 / 1487人阅读

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。

初步搭建脚手架

Tips

任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架

我通常使用 cli 生成项目骨架再在之基础上进行个人修改。

什么是 CLI

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面

顾名思义 XXX-CLI 就是使用命令行生成的 XXX 程序。之前写过一款基于 nodeJs 制作个性 CLI 的教程

如何用node开发自己的cli工具并发布到NPM ，想详细了解制作流程的可以简单看看。

vue-cli

截止 2018-09-02 vue-cli 最新版本为 3.0

vue 中文生态非常完善，我们直接去官网看看：

https://cli.vuejs.org/zh/

vue-cli2 和 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 的安装

安装前应注意前提条件，避免浪费不必要的时间。

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。(如果你用的和我一样 也是 cli-2 那么不需要如此新的 nodeJs )你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

不将远离了，官网比我讲的好得多。

可以使用 yarn 或 npm 来安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

我用 NPM 来重新尝试一次 (对 npm 速度表示不理想的可以尝试淘宝的 CNPM 不要过度依赖cnpm)：

localhost:~ Venda-GM$ sudo cnpm i @vue/cli -g

TIPS

npm 中 install 可以写成 i , -g 放哪都行 ，--save 可以写成 -S  , --save-dev 可以写成 -D

看到这个画面，安装完成了。

测试一下查看一下版本是不是正确，ok 创建项目：

vue create new-bee

拉取 2.x 模板 (旧版本)

Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init

vue init 的运行效果将会跟 vue-cli@2.x 相同

vue init webpack my-project #这样来生成一个 *cli-2* 项目

使用 vue-cli-2 生成项目

vue init webpack new-bee

下面是我创建项目我所选的选项：

稍微讲讲下面三个：

vue build 的方式

推荐使用 运行时 + 编译时，通常需要 webpack 编译 .vue 模板。

是否选择预先设定的Eslint

并是不每个人都适合的，有的要求过于严格，我自己有一套成熟的，代码在这里 , 就用自己的了，当然可以基于它做一些删减。

它要帮我们执行 install

如果你有一个好的socket终端代理，可以用这个，否则可以选择 No 自己用 cnpm 执行

初窥目录结构

让我们来看看 vue-cli2 自动生成的项目目录，我打上标签，为可能不太理解的同学简单描述一下

这次我们重构的主要目的是规范、更适合多模块多人协作、而不是为了让它看起来更复杂，本文的项目结构、esLint 改良、等都是经过项目小组反复的推敲决定的，有一定的生产价值。

杞人忧天：为 electron 做好准备

cli 生成的项目 src 下面直接就是源码，但是为了考虑以后使用 electron 我们再用 renderer 包裹一下，规范一点。

可以参考一下 electron-vue

兼容Electron的源码目录

tips: 上述截图 github 树形目录的插件是 octotree 也可以在谷歌商店直接搜索安装，看源码省去不少时间。

先不建立 electron 的 main 文件夹和 index.ejs 需要添加依赖，目前暂时用不到。

别忘了改一下 webpack 相关的路径问题

加上 renderer 的路径

 app: "./renderer/src/main.js"

@ 的路径也要在 webpack 进行修改，否则会不找组件

需要改下 webpack alias [别名] 配置

改之后的样子

alias: {
      "@": resolve("renderer/src"),
    }

容器级的目录

在组件目录(components) 同级建立容器(container) ：容器里面的各个模块分离开，这样可以使项目模块看起来更加清晰。如果十多人协作的项目又能很好地对工作区划分，合理的建立路由，避免不必要的冲突。

以目前的论坛项目为例

路由目录的调整规范

在 /router 下为 /container/blog 建立 blog.js

const Blog = () => import ( /* webpackChunkName: "blog" */ "@/container/blog/index")

/*
 所有container/blog目录下的路径都配置在此路由children下，避免混乱
 */
let routes = [{
  path: "/blog",
  name: "blog",
  component: Blog,
  children: [{
      path: "blogdemo",
      component: Blog
    } 
  ]
}]


export {
  routes
}

// 注意 
/* webpackChunkName: "blog" */ 
//是为了后面的路由懒加载，后面会讲，不懂没关系，现在可以忽略

自动生成的 index.js 主路由是这样的

缺点：

太单一，我们不可能所有的路由都写在里面作为 children ，看起来非常混乱，开发调试很难处理，多人协作还很容易引起冲突。

我们尝试将 blog.js 引过来

先将 blog.js export 的路由引过来，起一个别名防止冲突

import { routes as blogRoutes } from "./blog"

因为可能有N多个路由模块，我们将 routes 拆分

自动生成的是这样简单的：

//直接导出路由
export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    }
  ]
})

我们拆分成这样：

//定义基础路由
let route = [
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld
  }
]

//以此类推可以方便的链接更多路由
route = route.concat(blogRoutes)

//导出
export default new Router({
  routes: route,
  linkActiveClass: "active"
})

回过头来，我们为 blog/index.vue 添加一些内容，测试一下：

测试一下

首先

npm install

嫌慢可以使用淘宝的 cnpm 我以前的文章讲过

npm run dev

按照提示在浏览器输入：http://localhost:8080/#/blog

vue-cli2 webpack 生成的项目是支持热部署的，所以很多配置不需要自己从零开始配置，这也是我希望大家使用 CLI 的原因，省去了一些时间。其他 login 等一些模块按照这个模式写就可以了。

谈谈 eslint

个人觉得 esLint 不论是在个人项目还是团队协作中，都是有价值的，它可以让自己、团队的代码风格标准化。现在esLint 甚至可以预测你的代码是否可能会有问题。建议可以制定一些规则，开发时通过你的 IDE(集成环境) ： idea 、WebStorm、 vscode、之类的插件配合检测，eslint 打包检测编译不通过的那种非常严格的初期还是不要尝试了。

我当时参考 airbnb 调整的配置，经过一年多的项目实战逐渐调整，目前还算比较合理，esLint配置规则代码在这里。

本章代码在这里

你甚至可以再 commit 里看到本章循序渐进的改造过程

项目构建总结

项目构建暂时就讲到这里了，我们依靠 cli-2 生成了一个基本的骨架，但并不依赖 cli-2 ,我们对骨架进行了一些扩展，至于具体的 webpack 的优化，axios 的优化、拦截、node 做开发模式代理层等等，我觉得随着项目进行来讲更好，我不应该一味的灌一堆知识，希望大家能坚持跟我消化。

关于我

目前在写《从零构建前后分离项目》系列，修正和补充以此为准

不断更新的《从零构建前后分离项目》实践地址

往期文章

《从零构建前后分离 WEB 项目》序 - 开源的意义

《从零构建前后分离web项目》：开篇 - 纵观WEB历史演变

《从零构建前后分离web项目》探究 - 深入聊聊前后分离架构

《从零构建前后分离web项目》准备 - 前端了解过关了吗？前端基础架构和技术介绍

《从零构建前后分离web项目》实战 - 5分钟快速构建规范的前端项目骨架

GPU云服务器云服务器前后端分离前后端分离开发 js前后端分离框架前后端不分离 jsp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77129.html

Yii2框架实战

开始使用composer安装 showImg(https://segmentfault.com/img/bVzUjQ); 归档文件安装官网：http://www.yiiframework.com/d... showImg(https://segmentfault.com/img/bVzUwd); 配置apache vhost 文件 DocumentRoot d:/wamp/www...

wuyangchun 2019-06-27 14:10 评论0 收藏0
Java窗口（JFrame）从零开始（7）——下拉列表+列表框

摘要：下拉列表列表框身份证军人证残疾证护照身份证军人证残疾证护照定义字符串实例化下拉列表实例化列表框实例化面板设置大小实例化面板设置关闭方式，可以选择多种关闭玄子选项下拉列表（JComboBox）列表框（JList） package jframe; import java.awt.BorderLayout; import java.awt.Container; import java.aw...

wing324 2019-08-16 10:33 评论0 收藏0
Java窗口（JFrame）从零开始（6）——单选按钮+复选框

单选按钮+复选框单选按钮、复选框是什么这个都知道，不做解释。上代码（自己写着玩的，排班不太好）package jframe;import java.awt.BorderLayout;import java.awt.Container;import java.awt.FlowLayout;import java.awt.event.ActionEvent;import java.awt.event...

youkede 2019-08-16 10:33 评论0 收藏0
iKcamp&掘金Podcast直播回顾（12月2号和9号的两场）

摘要：月号哈志辉前端工程化沪江实践哈志辉沪江前端架构师，移动前端高效开发实战作者之一在线地址月号陈达孚实现渐进式应用陈达孚香港中文大学计算机硕士，移动前端高效开发实战作者之一，前端开发者指南译者之一，中国前端开发者大会中生代技术大会荣誉讲师，沪江 12月2号－哈志辉－前端工程化沪江CCtalk实践哈志辉：沪江CCtalk前端架构师，《移动Web前端高效开发实战》作者之一在线地址：htt...

everfly 2019-08-22 11:14 评论0 收藏0
Pyhton--Redis实战：Mac brew安装redis

摘要：下一篇文章实战第一章第一节简介安装下载失败不过不需要担心，会已经从其它地方下载并正确安装了配置文件路径启动可选添加至开机启动项可选下一篇文章实战第一章第一节简介下一篇文章：Python--Redis实战：第一章第一节：Redis简介 1、安装redis $ brew install redis showImg(https://segmentfault.com/img/remote/...

Towers 2019-07-30 17:54 评论0 收藏0