环境安装

最新推荐文章于 2024-10-10 23:05:59 发布

chifudai0188

最新推荐文章于 2024-10-10 23:05:59 发布

阅读量128

点赞数

文章标签：数据库 webpack javascript ViewUI

原文链接：https://my.oschina.net/u/3631952/blog/1502877

版权

一些常用的环境安装整理

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