初步搭建脚手架
Tips
任何不错的开源项目都有 project-cli 脚手架, 我们用它生成往往能快速配制出最佳的, 理想的脚手架
我通常使用 cli 生成项目骨架再在之基础上进行个人修改.
什么是 CLI
命令行界面 (英语: command-line interface, 缩写: CLI) 是在图形用户界面得到普及之前使用最为广泛的用户界面, 它通常不支持鼠标, 用户通过键盘输入指令, 计算机接收到指令后, 予以执行. 也有人称之为字符用户界面
顾名思义 XXX-CLI 就是使用命令行生成的 XXX 程序. 之前写过一款 基于 nodeJs 制作个性 CLI 的教程
如何用 node 开发自己的 cli 工具并发布到 NPM , 想详细了解制作流程的可以简单看看.
vue-cli https://cli.vuejs.org/zh/
截止 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 https://npm.taobao.org/ 不要过度依赖 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 包裹一下, 规范一点.
可以参考一下 https://github.com/SimulatedGREG/electron-vue
兼容 Electron 的源码目录
tips: 上述截图 github 树形目录的插件是 https://github.com/buunguyen/octotree 也可以在谷歌商店直接搜索安装, 看源码省去不少时间.
先不建立 electron 的 main 文件夹 和 index.ejs 需要添加依赖, 目前暂时用不到.
别忘了改一下 webpack 相关的路径问题
加上 renderer 的路径
app: './renderer/src/main.js'
复制代码
@ 的路径也要在 webpack 进行修改, 否则会不找组件
需要改下 webpack alias [别名] 配置
改之后的样子
- alias: {
- '@': resolve('renderer/src'),
- }
复制代码
容器级的目录
在 组件目录(components) 同级建立 容器(container) : 容器里面的各个模块分离开, 这样可以使项目模块看起来更加清晰. 如果十多人协作的项目又能很好地对工作区划分, 合理的建立路由, 避免不必要的冲突.
以目前的论坛项目 https://github.com/pkwenda/new-bee 为例
路由目录的调整规范
在 /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 生成的项目是支持热部署的, 所以很多配置不需要自己从 0 开始配置, 这也是我希望大家使用 CLI 的原因, 省去了一些时间. 其他 login 等一些模块 按照这个模式写就可以了.
谈谈 eslint
个人觉得 esLint 不论是在个人项目还是团队协作中, 都是有价值的, 它可以让自己, 团队的代码风格标准化. 现在 esLint 甚至可以预测你的代码是否可能会有问题. 建议可以制定一些规则, 开发时通过你的 IDE(集成环境) : idea ,WebStorm, vscode, 之类的插件配合检测, eslint 打包检测编译不通过的那种非常严格的初期还是不要尝试了.
我当时参考 airbnb 调整的配置, 经过一年多的项目实战逐渐调整, 目前还算比较合理, esLint 配置规则代码在这里.
本章代码在这里
你甚至可以再 https://github.com/pkwenda/Blog/commits/master 里看到本章循序渐进的改造过程
项目构建总结
项目构建暂时就讲到这里了, 我们依靠 cli-2 生成了一个基本的骨架, 但并不依赖 cli-2 , 我们对骨架进行了一些扩展, 至于具体的 webpack 的优化, axios 的优化, 拦截, node 做开发模式代理层 等等, 我觉得随着项目进行来讲更好, 我不应该一味的灌一堆知识, 希望大家能坚持跟我消化.
来源: https://juejin.im/post/5b9b62ae6fb9a05d1a12c4db