01_vue和react的安装

本系列文集将对Vue.js和ReactJS同时进行记录，基本的语法将会忽略，重点放在实现上，例如同一个功能会分别采用Vue.js和ReactJS各做一次实现。

对于javascript(简称JS)或者JS的框架而言，没有安装的概念，因为所有的JS文件只要下载到本机，就可以直接使用(不需要做任何预处理就可以直接被HTML调用)。部分框架依赖于大量的其他JS组件，这些JS组件都是一个单一或者有结构的文件，所谓的安装就是把这些个框架依赖的包给整合在一起使其能正常的运行不报错。

JS的框架或组件库非常丰富以至于仅仅是管理和组织这些个库文件就要花一些时间，因此出现了npm这个包管理器，然而这个包管理器需要依赖nodejs，因此做前端nodejs应该是必装的。

这里采用了两种方式来"安装"，第一种是手动安装，第二种是通过npm进行安装；两种安装方式在项目开发过程中只要选择其中一种即可，这里只是为了记录各种不同的安装方式。

手动安装 vue.js

在官网下载一个的vue.js文件(开发版本)，放到html能识别和加载到的目录就已完成了安装。

C:\>mkdir %userprofile%\Desktop\projectWithVue

手动vue.js文件并放入到projectWithVue目录中
在projectWithVue目录中创建一个html文件
撰写如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="hello">
    {{ message }}
</div>

<script>
    var demo = new Vue({
        el: '#hello',data: {
            message: 'Hello Vue.js!'
        }
    })
</script>
</body>
</html>

手动安装 react.js

在官网下载react.js和react-dom.js文件(右键链接另存为)，放到html能识别和加载到的目录就已完成了安装。

C:\>mkdir %userprofile%\Desktop\projectWithReact

手动react.js和react-dom.js文件并放入到projectWithReact目录中
在projectWithReact目录中创建一个html文件
撰写如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
</head>
<body>

<div id="hello"></div>

<script>
    const element = React.createElement('span',{},'Hello React.js!');
    ReactDOM.render(
      element,document.getElementById('hello')
    );
</script>
</body>
</html>

使用npm来安装Vue.js

[root@localhost ~]# npm install vue
/root
└── vue@2.2.4 

[root@localhost ~]# ls
anaconda-ks.cfg  node_modules

[root@localhost ~]# tree node_modules/
node_modules/
└── vue
    ├── dist
    │   ├── README.md
    │   ├── vue.common.js
    │   ├── vue.common.min.js
    │   ├── vue.esm.js
    │   ├── vue.js
    │   ├── vue.min.js
    │   ├── vue.runtime.common.js
    │   ├── vue.runtime.esm.js
    │   ├── vue.runtime.js
    │   └── vue.runtime.min.js
    ├── LICENSE
    ├── package.json
    ├── README.md
...
...
...

安装在系统默认的Path中(全局安装)

[root@localhost ~]# npm install vue --global
/usr/lib
└── vue@2.2.4 

[root@localhost ~]# ls /usr/lib/
... ... ... node_modules ... ... ...

[root@localhost ~]# ls /usr/lib/node_modules/
npm  vue

使用npm来安装ReactJS

[root@localhost ~]# npm install react react-dom
/root
├── react@15.4.2 
└─┬ react-dom@15.4.2 
  ├─┬ fbjs@0.8.9 
  │ ├── core-js@1.2.7 
  │ ├─┬ isomorphic-fetch@2.2.1 
  │ │ ├─┬ node-fetch@1.6.3 
  │ │ │ ├─┬ encoding@0.1.12 
  │ │ │ │ └── iconv-lite@0.4.15 
  │ │ │ └── is-stream@1.1.0 
  │ │ └── whatwg-fetch@2.0.3 
  │ ├─┬ promise@7.1.1 
  │ │ └── asap@2.0.5 
  │ ├── setimmediate@1.0.5 
  │ └── ua-parser-js@0.7.12 
  ├─┬ loose-envify@1.3.1 
  │ └── js-tokens@3.0.1 
  └── object-assign@4.1.1 

[root@localhost ~]# ls node_modules/
asap     encoding  iconv-lite        is-stream  loose-envify  object-assign  react      setimmediate  vue
core-js  fbjs      isomorphic-fetch  js-tokens  node-fetch    promise        react-dom  ua-parser-js  whatwg-fetch

安装在系统默认的Path中(全局安装)

[root@localhost ~]# npm install react react-dom --global
/usr/lib
├─┬ react@15.4.2 
│ ├─┬ fbjs@0.8.9 
│ │ ├── core-js@1.2.7 
│ │ ├─┬ isomorphic-fetch@2.2.1 
│ │ │ ├─┬ node-fetch@1.6.3 
│ │ │ │ ├─┬ encoding@0.1.12 
│ │ │ │ │ └── iconv-lite@0.4.15 
│ │ │ │ └── is-stream@1.1.0 
│ │ │ └── whatwg-fetch@2.0.3 
│ │ ├─┬ promise@7.1.1 
│ │ │ └── asap@2.0.5 
│ │ ├── setimmediate@1.0.5 
│ │ └── ua-parser-js@0.7.12 
│ ├─┬ loose-envify@1.3.1 
│ │ └── js-tokens@3.0.1 
│ └── object-assign@4.1.1 
└─┬ react-dom@15.4.2 
  ├─┬ fbjs@0.8.9 
  │ ├── core-js@1.2.7 
  │ ├─┬ isomorphic-fetch@2.2.1 
  │ │ ├─┬ node-fetch@1.6.3 
  │ │ │ ├─┬ encoding@0.1.12 
  │ │ │ │ └── iconv-lite@0.4.15 
  │ │ │ └── is-stream@1.1.0 
  │ │ └── whatwg-fetch@2.0.3 
  │ ├─┬ promise@7.1.1 
  │ │ └── asap@2.0.5 
  │ ├── setimmediate@1.0.5 
  │ └── ua-parser-js@0.7.12 
  ├─┬ loose-envify@1.3.1 
  │ └── js-tokens@3.0.1 
  └── object-assign@4.1.1 


[root@localhost ~]# ls /usr/lib/node_modules/
npm  react  react-dom  vue

运行npm安装的项目

Vue.js

初始化开发环境

# 安装vue-cli命令行项目管理工具
[root@localhost ~]# npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目，会有交互提示，全部yes即可.
[root@localhost ~]# vue init webpack my-project
# 进入项目文件
[root@localhost ~]# cd my-project
# 安装项目依赖组件
[root@localhost my-project]# npm install
# 运行项目
[root@localhost ~]# npm run dev
  DONE  Compiled successfully in 3295ms    1:05:05 AM
> Listening at http://localhost:8080

ReactJS

初始化开发环境

# 安装react命令行项目管理工具
[root@localhost ~]# npm install -g create-react-app
# 创建一个项目
[root@localhost ~]# create-react-app hello-world
# 进入该项目
[root@localhost ~]# cd hello-world
# 启动项目
[root@localhost hello-world]# npm start
Starting the development server...

Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build,use npm run build.

访问项目页面(http://localhost:3000)

ReactJS

Webpack

上面通过npm安装Vue.js和ReactJS库、初始化项目和运行项目，采用的是webpack进行多js文件合并、混淆和压缩，通过这种方式可以保护前端源码的接口暴露。
也就是说在撰写Vue.js和ReactJS项目时多个JS文件都会被编译成一个bindle.js文件。

注意事项

尽量避免全局安装项目依赖组件

在过去用react-native、reactjs、vue时，大部分的安装教程文档都没有带--global参数，当时也没考虑那么多，只是觉得每次创建一个项目都要等好久，每次项目代码根目录总是会有node_module这个目录且这个目录下面非常多的js三方库。今天回想起在Python编程语言中，一直在强调建议在项目中使用virtualenv，原因是每个项目依赖的第三方组件也许是相同的，但是版本有可能会不同，这会导致多个项目在使用同一个python编译器的时候造成第三方组件版本不同无法正常运行。回过来看的话，js也是一样的，项目依赖的第三方Js库，在用npm安装时不能带--global，而一些通用管理类的第三方JS库则建议用--global，例如：gulp，webpackage， Browserify 等。