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

2018-09-14 admin

初步搭建脚手架

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

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

什么是 CLI

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

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

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

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

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

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

vue-cli2 和 vue-cli3 的对比

很遗憾,vue-cli-32018-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 )你可以使用 nvmnvm-windows 在同一台电脑中管理多个 Node 版本。

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

可以使用 yarnnpm 来安装

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

npminstall 可以写成 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

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

稍微讲讲下面三个:

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

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

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

初窥目录结构

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

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

杞人忧天 : 为 electron 做好准备

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

可以参考一下 electron-vue

兼容Electron的源码目录

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

  • 先不建立 electronmain 文件夹 和 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" */ 
//是为了后面的路由懒加载,后面会讲,不懂没关系,现在可以忽略

太单一,我们不可能所有的路由都写在里面作为 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 做开发模式代理层 等等,我觉得随着项目进行来讲更好,我不应该一味的灌一堆知识,希望大家能坚持跟我消化。

往期文章

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

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

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

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

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

原文链接:https://segmentfault.com/a/1190000016400904

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40287.html

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

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
回到顶部