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

时间 2019-11-17

标签从零构建先后分离的web项目实战 5分快速构建规范 vue 项目骨架栏目 HTML 繁體版

原文原文链接

初步搭建脚手架

Tips

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

我一般使用 cli 生成项目骨架再在之基础上进行我的修改。html

什么是 CLI

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

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

如何用node开发本身的cli工具并发布到NPM ，想详细了解制做流程的能够简单看看。java

vue-cli

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

vue 中文生态很是完善，咱们直接去官网看看：webpack

cli.vuejs.org/zh/ios

vue-cli2 和 vue-cli3 的对比

很遗憾，vue-cli-3 是 2018-08-11 出来的，而个人论坛早在以前就着手搭建了 cli-3 耽误了我一些时间，后面也会提到git

简单看看了看 vue-cli3 的新特性：

能够生成 pwa
支持 UI 界面勾勾选选就能够了
兼容 cnpm 了
搞了一套本身的 vue-cli-service 以下：

我这两天不忙的时候就在考虑项目兼容 vli-3 可是后来废了不少时间，效果依然不理想，我回滚了代码宣布放弃了。github

鉴于使用 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 添加一些内容，测试一下：

<template>
  <div class="Blog">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script> export default { name: "Blog", data() { return { msg: "Welcome to Your Blog Page" }; } }; </script>
复制代码

测试一下

首先

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 作开发模式代理层等等，我以为随着项目进行来说更好，我不该该一味的灌一堆知识，但愿你们能坚持跟我消化。