Vue学习笔记(五)——配置开发环境及初建项目

前言

    在上一篇中，咱们经过初步的认识，简单了解 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官网地址,直接点击下载安装。

注意：在此以前，能够有朋友会发现，在博文目录中，很早就有一篇关于node安装与vue运行的文章，大伙能够参考，进行相应的安装

 经过打开 CMD 命令窗口，输入  node -v，检查node是否安装成功

包管理器

    因为新版的nodejs已经集成了npm，因此以前npm也一并安装好了。

    NPM是随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题，常见的使用场景有如下几种：

   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编译文件 -> 输出文件

做用：

   一、把依赖树按需分割、按需加载；
　二、把初始加载时间控制在较低的水平；
　三、每一个静态资源都应该成为一个模块；
　四、能把第三方库集成到项目里成为一个模块；
　五、能定制模块打包器的每一个部分；
　六、能适用于大型项目。

 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、 建立项目

 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）测试效果

 

说明

1、项目框架构造：

2、项目可视化UI界面

经过命令：vue ui

 经过导入功能 导入以前建立的项目文件夹，能够查看项目插件、项目运行依赖、项目配置等

 你能够在这管理（安装、删除）插件、运行并分析你的项目文件

3、 生命周期

 

总结

 1.经过以上基本的环节搭建与项目的初步建立，咱们已经能够进行相关业务逻辑的开发了。

 2.Node.js是一个对于前端工做者不可或缺的工具，Node.js的应用快速发展，所以对于Node.js的学习和熟练运用，必不可少。

 3.参考vue-cli官方