文档章节

环境安装

木楠楠儿
 木楠楠儿
发布于 2017/08/04 16:33
字数 2391
阅读 6
收藏 0

一些常用的环境安装整理

http://note.youdao.com/noteshare?id=e0f3b72085b7b91be2c88301dcb26653

 

下载node.js

中文地址:http://nodejs.cn/download/

英文地址:https://nodejs.org/en/download/

安装node.js(新版本默认会设置全局变量,如无法在全局模式下运行,请手动设置全局变量)

npm包管理器   

使用方式

npm init  会引导你创建一个package.json文件,包括名称、版本、作者这些信息等

 npm install <name>安装nodejs的依赖包

 npm install <name> -g  将包安装到全局环境中

 npm install <name> --save  安装的同时,将信息写入package.json中

 npm remove <name>移除

 npm update <name>更新

 npm view <name> versions 查看可用版本

 <name>:操作的模块名

安装cnpm

 

在cmd中输入npm install -g cnpm –registry=https://registry.npm.taobao.org 即可将npm指向国内镜像源,之后输入cnpm –v  如果显示版本信息 则安装成功

 

安装bower

 

在cmd中输入cnpm install bower -g即可开始安装bower至刚刚您所指定的node_global,同样地,在安装完毕后输入bower –v如果显示版本信息 则安装成功

 

安装express框架

npm i express -g    

npm i express-generator -g

之后 进入测试目录 cmd中输入       express 项目名 -e(意为创建ejs模板项目)   

查看是否能够使用

npm start 运行项目

 

安装grunt

Grunt是一个命令行工具,所以你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对OSX、*nix、BSD等系统中)权限或者作为管理员(对于Windows环境)来执行以下命令。

npm i -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行(grunt)此命令了。

 

注意:安装grunt-cli并不等于安装了 Grunt!Grunt-cli只是运行grunt模块的一个命令,你需要在本地(自己的项目中:npm i grunt)进行安装。

安装gulp

1. 全局安装 gulp:

 

npm install --global gulp

2. 作为项目的开发依赖(devDependencies)安装:

 

npm install --save-dev gulp

3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

 

var gulp = require('gulp');

gulp.task('default', function() {

  // 将你的默认的任务代码放在这

});

 

4.运行 gulp:

gulp

默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。

想要单独执行特定的任务(task),请输入 gulp <task> [<othertask>]。

5.gulp插件安装

使用gulp插件首先就得安装插件,插件安装:

cnpm i 插件名

cnpm i gulp-uglify --save-dev  安装压缩插件

安装webpack

1. 全局安装webpack (安装webpack命令行工具)

安装: npm i webpack@1.14.0  -g  //全局安装

测试: webpack version

只需要安装一次;

2. 本地安装(项目依赖)

全局安装相当于只是安装了webpack命令,如果需要在我们的项目中使用, 那么还需要本地安装(项目中安装)。

    安装:npm i webpack@1.14.0 --save-dev  //安装稳定版本(大多都是最新版)

npm i webpack@2.1.0-beta.11 --save-dev //安装指定版本

安装less

安装

在服务器端最容易的安装方式就是通过 npm (node.js 的包管理器),方法如下:

$ npm install -g less

命令行用法

安装 Less 后,就可以在命令行上调用 Less 编译器了,如下:

$ lessc styles.less

这将输出编译之后的 CSS 代码到 stdout,你可以将输出重定向到一个文件:

$ lessc styles.less > styles.css

若要输出压缩过的 CSS,只需添加 -x 选项。如果希望获得更好的压缩效果,还可以通过 --clean-css 选项启用 Clean CSS 进行压缩。

执行 lessc 且不带任何参数,就会在命令行上输出所有可用选项的列表。

 

安装mongoDB数据库

1. 下载安装包

mongodb-win32-x86_64-2008plus-ssl-3.2.9-signed.msi

 

2. 安装

选择自定义安装,一路下一步就装好了

 

3. 创建存储数据和日志的文件夹

d:\mongodb\db

d:\mongodb\log

 

4. 以服务形式启动数据库服务

打开安装目录  C:\Program Files\MongoDB\Server\3.2\bin

找到 mongod.exe命令

以管理员身份运行cmd,进入bin文件夹,执行下列命令

mongod --dbpath "d:\mongodb\db" --logpath "d:\mongodb\log\MongoDB.log" --install --serviceName "MongoDB"

(此步骤后注意查看是否设置了环境变量)

启动服务:

net start mongodb

 

关闭服务:

net stop mongodb

 

5. 开始执行命令

打开安装目录  C:\Program Files\MongoDB\Server\3.2\bin

找到 mongo.exe命令

mongo 即可进入mongodb 数据库管理模式:

可以开始写数据库命令

show db 显示数据库列表

use 数据名 创建数据库

6. 将MongoDB安装为windows服务(重点中的重点)

当mongod.exe被关闭时,mongo.exe 就无法连接到数据库了,因此每次想使用mongodb数据库都要开启mongod.exe程序,所以比较麻烦,此时我们可以将MongoDB安装为windows服务

以管理员身份运行cmd,进入bin文件夹,执行下列命令

mongod  --storageEngine mmapv1 --dbpath "d:\mongodb\db" --logpath "d:\mongodb\log\MongoDB.log" --install --serviceName "MongoDB"

 

这里MongoDB.log就是开始建立的日志文件,--serviceName "MongoDB" 服务名为MongoDB

 

接着启动mongodb服务

   > NET START MongoDB

打开任务管理器,可以看到进程已经启动。

   再次测试连接

  > mongo

 

注意:在使用时 最好引入mongoose

Mongoose是什么?

mongoose是Node.js平台的第三方模块

在Node.js平台中操作Mongodb数据库的第三方模块

 

使用流程:

1. 使用mongoose连接数据库的前提:

1) 数据库正在提供服务(mongodb数据库服务正在运行)

2) 安装mongoose包

 

2. 安装mongoose第三方模块

1) 使用 express 命令创建一个express项目框架

2) 在package.json描述文件中添加一个依赖 "mongoose":"*"

3) npm i 安装依赖包,就将 mongoose装上了。

 

3. 连接数据库

1) 引入模块

var mongoose=require('mongoose');

 

2) 使用connect方法连接数据库

mongoose.connect("mongodb://localhost:27017/itsource",function(err){

console.log('数据库连接成功!');

});

 

4. 定义骨架 schema

schema是一个以文件形式存在的数据结构

schema的数据类型:

String 字符串

Number 数字

Array 数组

 

var userSchema=new mongoose.Schema({

"name":String,

"age":Number,

"action":String

});

 

5. 使用骨架发布模型 Model

var userModel=mongoose.model('user',userSchema,'user');

 

注意:可以使用模型操作数据库,通常用于读取

userModel.find({},function(err,data){

//查到数据以后执行的代码

});

 

6. 使用模型创建实体

var user=new userModel();

user.name="张三";

user.age=18;

user.save(function(err){

//保存成功

});

 

user.remove(function(err){

//删除成功

})

 

注意:实体可以新增、修改、删除数据

安装yeoman脚手架

https://www.npmjs.com/package/generator-react-flux

1、 安装yeoman脚手架(方便项目搭建)

      npm install -g yo

 

2、安装yeoman的 Generators(自动生成器)

       npm install -g generator-react-flux

     

3、框架使用flux(进入新建目录后,使用yeoman脚手架搭建)

      mkdir example

   cd example

      yo react-flux 

 

4、 项目源文件拷贝完成后,下载相关库(建议ctrl+c中断后,自己来)

       npm install (。。。很慢,如果卡起了,可以多次中断)

 

       bower install (前端bootstrap库已经丢失,所以可以临时直接修改为最新bootstrap库,安装)

1. 删除bower.json中的dependence内容

2. bower install bootstrap --save [-o]

 

5、启动项目查看内容

       npm start  

上面补充

cnpm i react@15.3.1 react-dom@15.3.1 --save

cnpm i babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react --save

cnpm i webpack webpack-dev-server --save-dev

cnpm i react-hot-loader react-addons-css-transition-group --save    react需要的CSS3插件

 

 

样式

cnpm i node-sass sass-loader css-loader style-loader  --save

cnpm i less less-loader  --save

 

合并版

cnpm i react@15.3.1 react-dom@15.3.1 babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server autoprefixer node-sass sass-loader less less-loader css-loader style-loader react-hot-loader express react-addons-css-transition-group@15.3.1 --save

 

 

前端框架

cnpm i amazeui-touch –save

安装yarn

https://yarnpkg.com/zh-Hans/docs/install

 

混合式开发环境搭建

JDK环境搭建

安装

打开安装包===》下一步==》选择安装目录====》安装

 

配置(环境变量)

1)  配置JAVA_HOME,指向程序的根目录

JAVA_HOME = C:\Program Files\Java\jdk1.8.0_111

2)  配置全局环境变量,能够暴露java的bin目录(java和javac)

path = %path%;C:\Program Files\Java\jdk1.8.0_111\bin;

path = %path%;%JAVA_HOME%\bin;

 

 

 

环境变量 :

XXX_HOME(默认约束), 通常用来把某个环境加入全局,方便应用

 

PATH,为了让我们在cmd命令行任意目录可以使用某目录下载资源【把某个文件夹的资源放入全局】

 

 

检测是否成功(命令行):

Java

 

javac

安装Android环境

安装Android Studio

去掉第一次运行

首先找到配置文件,在文件夹C:\Soft\Android\Android Studio\bin中找到idea.properties

打开文件,在最后一行添加配置:

disable.android.first.run=true

配置

AndroidSDK环境

 

  设置ANDROID_HOME,SDK安装目录

  设置PATH,%ANDROID_HOME%\platform-tools (adb == android debug bridge)

 

检测(命令行):

   adb devices

安装yarn软件依赖管理

cnpm i -g yarn

yarn更换下载源

yarn config get registry

// 更换为淘宝源

yarn config set registry https://registry.npm.taobao.org

// 初始化项目

yarn init -y

// 安装webpack

yarn add webpack

// 更新到最新的

yarn upgrade webpack

// 安装项目里的依赖(package.json)

yarn install (等价于npm install)

 


安装React-Native

全局安装

cnpm i -g  react-native-cli

 

创建RN项目

1. 进入code根目录

2. CMD: react-native init RN(也是项目名称)

a) index.android.js

AppRegistry.registerComponent('RN', () => RN);

 

 

b) rn\android\settings.gradle

3. 如果有中断,手动使用yarn安装

   Cmd => yarn install / yarn   (等价于npm install)

 

4. rn目录,会多出一个node_modules

 

5. 准备运行到Android模拟器/真机

1) 使用Android studio,open==>  rn/android (接下来,就是漫长的安装环境自动安装依赖)

2) 或者,CMD==> react-native run-android(打开2个窗口)

 

6. 环境搭建好了,使用命令行开启React服务

这就是服务没有开启,手动开启服务:

CMD==> react-native start

Atom插件

 

react-snippets

react-es6-snippets

React-native-snippets

 

Hyperclick

js-hyperclick

© 著作权归作者所有

上一篇: vue入门
下一篇: vue-cli环境安装
木楠楠儿
粉丝 0
博文 5
码字总数 5052
作品 0
成都
程序员
私信 提问

暂无文章

PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
18分钟前
5
0
wildfly(JBoss AS)应用服务器快速入门

什么是wildfly JBoss AS 从8版本起名为wildfly。Wildfly是一个开源的基于JavaEE的轻量级应用服务器。可以在任何商业应用中免费使用。 WildFly是一个灵活的、轻量的、强大管理能力的应用程序服...

程序新视界
42分钟前
3
0
Java集合类常见面试知识点总结

Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾。 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java核心技术 https://blog.csdn.net/column/details/21930...

Java技术江湖
45分钟前
6
0
怎么用for循环打出爱心

先上效果图: 这是用*组成的爱心,下面讲讲思路: 首先这个图形可以拆分成三部分:第一部分是上面三行的两个梯形,第二部分是中间三行的长方形,第三部分是最下面的倒三角形。 其实图形拆分好...

INEVITABLE
51分钟前
4
0
用HttpUrlConnection伪造成HttpClient

https://www.jianshu.com/p/27ad06cc39d2

shzwork
56分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部