文档章节

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
勿以 star 数论高低!React 在前端框架世界仍是领先地位

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

局长
06/21
0
0
阿里系 React 项目飞冰 2.0 正式发布:支持 Vue 项目开发

飞冰 2.0 大版本已正式发布,带来了许多重要更新。 飞冰 2.0 是什么? 飞冰通过 Iceworks GUI 工具、完善的开发文档、丰富的组件等,无需安装配置任何前端开发环境(比如安装 node 等)、无需...

局长
05/08
0
17
Vue.js构建项目笔记1:vue-cli

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

透笔度
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部