本系列文集將對Vue.js和ReactJS同時進行記錄券盅，基本的語法將會忽略，重點放在實現(xiàn)上，例如同一個功能會分別采用Vue.js和ReactJS各做一次實現(xiàn)。
對于javascript(簡稱JS)或者JS的框架而言修噪，沒有安裝的概念查库，因為所有的JS文件只要下載到本機路媚，就可以直接使用(不需要做任何預(yù)處理就可以直接被HTML調(diào)用)。部分框架依賴于大量的其他JS組件樊销，這些JS組件都是一個單一或者有結(jié)構(gòu)的文件整慎，所謂的安裝就是把這些個框架依賴的包給整合在一起使其能正常的運行不報錯。
JS的框架或組件庫非常豐富以至于僅僅是管理和組織這些個庫文件就要花一些時間围苫，因此出現(xiàn)了npm這個包管理器裤园，然而這個包管理器需要依賴nodejs，因此做前端nodejs應(yīng)該是必裝的剂府。
這里采用了兩種方式來"安裝"拧揽，第一種是手動安裝，第二種是通過npm進行安裝腺占；兩種安裝方式在項目開發(fā)過程中只要選擇其中一種即可淤袜，這里只是為了記錄各種不同的安裝方式。
手動安裝 vue.js
在官網(wǎng)下載一個的vue.js文件(開發(fā)版本)衰伯，放到html能識別和加載到的目錄就已完成了安裝铡羡。
- 創(chuàng)建開發(fā)目錄
C:\>mkdir %userprofile%\Desktop\projectWithVue
- 手動vue.js文件并放入到projectWithVue目錄中
- 在projectWithVue目錄中創(chuàng)建一個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
在官網(wǎng)下載react.js和react-dom.js文件(右鍵鏈接另存為)，放到html能識別和加載到的目錄就已完成了安裝意鲸。
- 創(chuàng)建開發(fā)目錄
C:\>mkdir %userprofile%\Desktop\projectWithReact
- 手動react.js和react-dom.js文件并放入到projectWithReact目錄中
- 在projectWithReact目錄中創(chuàng)建一個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
...
...
...
- 安裝在系統(tǒng)默認的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
- 安裝在系統(tǒng)默認的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
- 初始化開發(fā)環(huán)境
# 安裝vue-cli命令行項目管理工具
[root@localhost ~]# npm install --global vue-cli
# 創(chuàng)建一個基于 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
- 初始化開發(fā)環(huán)境
# 安裝react命令行項目管理工具
[root@localhost ~]# npm install -g create-react-app
# 創(chuàng)建一個項目
[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)
Webpack
上面通過npm安裝Vue.js和ReactJS庫怎顾、初始化項目和運行項目读慎，采用的是webpack進行多js文件合并、混淆和壓縮槐雾，通過這種方式可以保護前端源碼的接口暴露夭委。
也就是說在撰寫Vue.js和ReactJS項目時多個JS文件都會被編譯成一個bindle.js文件。
注意事項
盡量避免全局安裝項目依賴組件
在過去用react-native蚜退、reactjs闰靴、vue時，大部分的安裝教程文檔都沒有帶--global參數(shù)钻注，當時也沒考慮那么多蚂且，只是覺得每次創(chuàng)建一個項目都要等好久，每次項目代碼根目錄總是會有node_module這個目錄且這個目錄下面非常多的js三方庫幅恋。
今天回想起在Python編程語言中杏死，一直在強調(diào)建議在項目中使用virtualenv，原因是每個項目依賴的第三方組件也許是相同的，但是版本有可能會不同淑翼，這會導(dǎo)致多個項目在使用同一個python編譯器的時候造成第三方組件版本不同無法正常運行腐巢。
回過來看的話，js也是一樣的玄括，項目依賴的第三方Js庫冯丙，在用npm安裝時不能帶--global，而一些通用管理類的第三方JS庫則建議用--global遭京，例如：gulp胃惜，webpackage， Browserify 等哪雕。
