文档章节

01_vue和react的安装

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 01:17
字数 1387
阅读 5
收藏 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灵感
粉丝 11
博文 2635
码字总数 83001
作品 0
程序员
私信 提问
前端神器:一行命令,React 组件转 Vue 组件!

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

cacao111
2018/07/11
0
0
Highcharts React、Angular 官方扩展包发布

为了方便用户在不同的框架中使用 Highcharts,我们针对目前市面上最流行的前端框架 React、Angular 进行封装并正式对外发布。 Highcharts React 扩展包 项目地址:https://github.com/highch...

简数科技
2018/04/17
0
0
在 React 中运行 Vue - react-vue

React-Vue旨在连接 React 和 Vue,帮助您在 React 中运行 Vue。 用途: 使用Vue 的 Reactivity 系统来观察React组件 使用 react-vue-loader 以在React应用中运行Vue组件 Reactivity 系统 感谢...

匿名
2017/06/16
0
1
关于Vue.js和React.js,听听国外的开发者怎么说?

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

马拉喀什
2018/01/05
0
0
Vue.js构建项目笔记1:vue-cli

一.一些简单的话 如果你学习或者使用过angularjs(1.x),你就会非常了解指令的使用,如:ng-click ng-if ng-show ng-src。当然还有控制器和各种服务。 如果你学习或者使用过react,你就会非...

透笔度
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
42分钟前
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
1
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
2
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部