前言
在上一篇 https://www.cnblogs.com/i3yuan/p/11779714.html 中, 我们通过初步的认识, 简单了解 vue 生命周期的八个阶段, 以及可以应用在之后的开发中, 针对不同的阶段的钩子采取不同的操作, 更好的实现我们的业务代码, 处理更加复杂的业务逻辑.
而在这一篇中, 我们将通过配置 vue 的开发环境以及搭建项目, 进一步的学习 vue 在开发中的使用方式.
对于开发 vue 项目之前, 我们需要进行 vue 环境配置, 大致的将需要用到的工具进行归类总结如下:(可能还有其他的工具, 或者配置方式, 这里仅是个人开发中常用的工具)
运行环境
1. 简单的说 Node.JS 就是运行在服务端的 JavaScript.
2.Node.JS 是一个基于 Chrome JavaScript 运行时建立的一个平台.
3.Node.JS 是一个事件驱动 I/O 服务端 JavaScript 环境, 基于 Google 的 V8 引擎, V8 引擎执行 JavaScript 的速度非常快, 性能非常好.
Node.JS 在维基百科中就已经很明确的说明了, 它是一个运行环境, 并不是其他的什么比如软件库, 简而言之, 和 C# 所需要的编译环境一样, Node.JS 就是 JavaScript 的编译环境, 它存在的目的就是为了让 JavaScript 可以和其他的后端语言一样能够在浏览器上运行, 换种说法就是, 可以让前端语言 JavaScript 在写完之后交给 Node.JS 进行编译和解释, 它的存在对于 JavaScript 有了质的飞跃, 对于一个前端来说利用 JavaScript 就可以编译后台代码是一件多么爽飞天的事情.
安装:
通过 node 官网地址 https://nodejs.org/zh-cn/ , 直接点击下载安装.
注意: 在此之前, 可以有朋友会发现, 在博文目录中, 很早就有一篇关于 node 安装与 vue 运行 https://www.cnblogs.com/i3yuan/p/10247599.html 的文章, 大伙可以参考, 进行相应的安装
通过打开 CMD 命令窗口, 输入 node -v, 检查 node 是否安装成功
包管理器
由于新版的 Node.JS 已经集成了 NPM, 所以之前 NPM 也一并安装好了.
NPM 是随同 Node.JS 一起安装的包管理工具, 能解决 Node.JS 代码部署上的很多问题, 常见的使用场景有以下几种:
1. 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用.
2. 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用.
3. 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用.
NPM 简单的可以这么理解: 在以前开发网站的时候, 比如你想使用 jQuery, 那么你点击 jQuery 网站上提供的链接就可以下载 jQuery, 放到自己的网站上使用, 当一个网站依赖的代码越来越多, 我们发现这是一件很麻烦的事情: 去 jQuery 官网下载 jQuery, 去 Bootstrap 官网下载 Bootstrap, 一个个手动的添加极其不方便, 于是, 有人想出了一个解决方案, 用一个工具把这些代码集中到一起来管理吧! 这个工具就是他用 JavaScript (运行在 Node.JS 上)写的 NPM, 全称是 Node Package Manager.
如果咱们使用的时候, 只需要再 packbag.JSON 中, 写上这个名字, 嗯! 就成功的从远程 down 下来了, 省去了一个个下载的环节, 是不是很方便了!
打包工具
webPack 运行流程:
初始化配置参数 -> 绑定事件钩子回调 -> 确定 Entry 逐一遍历 -> 使用 loader 编译文件 -> 输出文件
作用:
1, 把依赖树按需分割, 按需加载;
2, 把初始加载时间控制在较低的水平;
3, 每个静态资源都应该成为一个模块;
4, 能把第三方库集成到项目里成为一个模块;
5, 能定制模块打包器的每个部分;
6, 能适用于大型项目.
WebPack 可以看做是模块打包机: 它做的事情是, 分析你的项目结构, 找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(SCSS,TypeScript 等), 并将其打包为合适的格式以供浏览器使用.
安装指令:
NPM install webpack -g
Vue-CLI 脚手架
vue-cli 是脚手架工具, 其作用就是用配置好的模板迅速搭建起一个项目工程来, 省去自己配置 webpack 配置文件的基本内容.
vue-cli 是 vue.js 的脚手架, 用于自动生成 vue.JS+webpack 的项目模板的, 脚手架大家肯定知道, 就是一个架子, 用来搭建项目的整体基本骨架, 有点儿什么意思呢, 就比如咱们开发 .net 的时候, 咱们其实可以自己一步一步的建 mvc , 但是呢, VS 给我们封装了 MVC 框架, 我们直接就生成了整体框架, 包括基础包和一些必要文件夹, vue-cli 也是这个作用.
安装:
NPM install -g @vue/cli
开始
安装好脚手架后, 在这里用到的脚手架是 3.0 版本以上的.
一, 创建项目
1) 创建项目: vue create firstproject
如果没有配置保存过, 则只有以下两个选项:
1. 自动默认模式 ( 直接 enter): 非常适合快速创建一个新项目的原型, 没有带任何辅助功能的 NPM 包
2. 手动模式(按方向键 ↓), 是我们所需要的面向生产的项目, 提供可选功能的 NPM 插件包
这里选择手动方式: 使用键盘上下键来操作, 然后 Enter 选中, 就会出现插件列表, 也是通过上下键, 然后用 空格键 来选中
在这里说明:
- >( ) Babel // 转码器, 可以将 ES6 代码转为 ES5 代码, 从而在现有环境执行.
- ( ) TypeScript// TypeScript 是一个 JavaScript(后缀. JS)的超集 (后缀. ts) 包含并扩展了 JavaScript 的语法, 需要被编译输出为 JavaScript 在浏览器运行, 目前较少人再用
- ( ) Progressive Web App (PWA) Support// 渐进式 Web 应用程序
- ( ) Router // vue-router(vue 路由)
- ( ) Vuex // vuex(vue 的状态管理模式)
- ( ) CSS Pre-processors // CSS 预处理器(如: Less,Sass)
- ( ) Linter / Formatter // 代码风格检查和格式化(如: ESlint)
- ( ) Unit Testing // 单元测试(unit tests)
- ( ) E2E Testing // e2e(end to end) 测试
2)选择 CSS 预处理
主要为 CSS 解决浏览器兼容, 简化 CSS 代码 等问题.
这里选择 stylus
在这里说明:
- > SCSS/Sass //Sass 安装需要 Ruby 环境, 是在服务端处理的, SCSS 是 Sass3 新语法(完全兼容 CSS3 且继承 Sass 功能)
- Less //Less 最终会通过编译处理输出 CSS 到浏览器, Less 既可以在客户端上运行, 也可在服务端运行 (借助 Node.JS)
- Stylus //Stylus 主要用来给 Node 项目进行 CSS 预处理支持, Stylus 功能上更为强壮, 和 JS 联系更加紧密, 可创建健壮的, 动态的的 CSS.
3)单元测试:
在这里说明:
- > Mocha + Chai //mocha 灵活, 只提供简单的测试结构, 如果需要其他功能需要添加其他库 / 插件完成. 必须在全局环境中安装
- Jest // 安装配置简单, 容易上手. 内置 Istanbul, 可以查看到测试覆盖率, 相较于 Mocha: 配置简洁, 测试代码简洁, 易于和 babel 集成, 内置丰富的 expect
4)放置配置
在这里说明:
- > In dedicated config files // 独立文件放置
- In package.JSON // 放 package.JSON 里
5)是否保存本次配置
? Save this as a preset for future projects? (Y/n) // y: 记录本次配置, 然后需要你起个名; n: 不记录本次配置
6)等待安装过程
7)搭建完成
8)测试效果
说明
一, 项目框架构造:
二, 项目可视化 UI 界面
通过命令: vue ui
通过导入功能 导入之前创建的项目文件夹, 可以查看项目插件, 项目运行依赖, 项目配置等
你可以在这管理 (安装, 删除) 插件, 运行并分析你的项目文件
三, 生命周期
总结
1. 通过以上基本的环节搭建与项目的初步创建, 我们已经可以进行相关业务逻辑的开发了.
2.Node.JS 是一个对于前端工作者不可或缺的工具, Node.JS 的应用快速发展, 因此对于 Node.JS 的学习和熟练运用, 必不可少.
3. 参考 vue-cli 官方 https://cli.vuejs.org/
Vue 学习笔记(五)-- 配置开发环境及初建项目
来源: http://www.bubuko.com/infodetail-3280827.html