文档章节

01_vue和react的安装

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 01:17
字数 1387
阅读 3
收藏 0

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

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

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

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

手动安装 vue.js

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

  1. 创建开发目录
C:\>mkdir %userprofile%\Desktop\projectWithVue
  1. 手动vue.js文件并放入到projectWithVue目录中
  2. 在projectWithVue目录中创建一个html文件
  3. 撰写如下代码
<!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.jsreact-dom.js文件(右键链接另存为),放到html能识别和加载到的目录就已完成了安装。

  1. 创建开发目录
C:\>mkdir %userprofile%\Desktop\projectWithReact
  1. 手动react.js和react-dom.js文件并放入到projectWithReact目录中
  2. 在projectWithReact目录中创建一个html文件
  3. 撰写如下代码
<!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

  1. 安装在当前目录
[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
...
...
...
  1. 安装在系统默认的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

  1. 安装在当前目录
[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
  1. 安装在系统默认的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

  1. 初始化开发环境
# 安装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

  1. 初始化开发环境
# 安装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.
  1. 访问项目页面(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 等。

本文转载自:http://www.jianshu.com/p/a4f27bd2d16e

共有 人打赏支持
AllenOR灵感
粉丝 10
博文 2634
码字总数 82983
作品 0
程序员
前端神器:一行命令,React 组件转 Vue 组件!

基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component...

cacao111
07/11
0
0
关于Vue.js和React.js,听听国外的开发者怎么说?

VueJS 与 ReactJS 到底怎么样如何?听听别人怎么说。 使用所有新的库和框架,很难跟上所有这些库和框架,也就是说,这就需要您决定哪些是值得花时间的。 让我们看看人们说什么: “和Vue.JS一...

马拉喀什
01/05
0
0
Vue和React数据绑定对比

在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全没关系的 表单的双向绑定,说到底不过是 (value 的单向绑定 + onChange 事件侦...

pattyzzh
05/14
0
0
Vue vs React: Javascript 框架之战

正如我们之前提到的,WordPress 的核心团队正争论着为应该将哪款(前端框架)加入现在的架构之中。目前看来,暂时脱颖而出的是React与Vue.js,社区中的很多成员正权衡着这两款框架的利弊。 ...

技术小能手
07/23
0
0
勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长
06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于pip

我在更新pip的时候碰到的一些问题。 第一次安装,直接安装就ok了,所以也没研究,没想到后来由于安装了python2.x和python3.x之后出现了问题。 如果要将pip更新到最新版本需要指明是哪个版本的...

恰东
30分钟前
1
0
对硬盘进行分区时,GPT和MBR有什么区别

在Windows 8或8.1中设置新磁盘时,系统会询问你是想要使用MBR还是GPT分区。GPT是一种新的标准,并在逐渐取代MBR。 GPT带来了很多新特性,但MBR仍然拥有最好的兼容性。GPT并不是Windows专用的...

yizhichao
32分钟前
2
0
区块链教程btcpool矿池源码分析StratumServer模块解析

兄弟连区块链教程btcpool矿池源码分析StratumServer模块解析 核心机制总结 接收的job延迟超过60秒将丢弃 如果job中prevHash与本地job中prevHash不同,即为已产生新块,job中isClean状态将置为...

兄弟连区块链入门教程
32分钟前
1
0
JS中的异常捕获

JS中的异常捕获(目的:把抛出的错误捕获到,不让其阻断浏览器的继续执行) try{//需要执行的JS代码(可能会报错)}catch(e){//try中代码报错,会执行catch}finally{//不管try中的代...

NDweb
42分钟前
2
0
ObjectARX_AcDb2dPolyline复杂实体

1遍历:访问或者编辑复杂实体也需要通过特定的方式。 AcDb2dPolyline的顶点信息不能通过AcDb2dPolyline对象直接得到,需要遍历AcDb2dPolyline所包含的AcDb2dVertex对象: void IteratePolylin...

一个小妞
44分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部