TroyeKK小站

Index

01.webstack

Mar 21, 20256 min read

1 bio

1.1 nodejs

01.安装node.js
	https://nodejs.org/en/

02.淘宝镜像加速
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	
03.npm安装
	npm/cnpm install express		--下载到当前目录（只有当前目录可用）
	npm/cnpm install express -g		--下载到整个电脑（所有目录均可用）
	npm install						--根据package.json自动下载js

1.2 webpack

01.webpack：打包，可用将js等静态资源（js、css、图片）进行压缩，从而提高性能
	a.安装
		cnpm install webpack -g							  --全局安装
		cnpm install webpack-cli -g						  --全局安装
	b.验证
		webpack -v
	c.插件：默认webpack只会打包js文件，如果css、图片等其他静态资源打包，需要安装插件
		cnpm install style-loader css-loader --save-dev	  --局部安装
	d.打包：将css、js打包成一个 .dist/bound.js
    	webpack

02.webpack-dev-server：实现修改js/css后，不需要再次打包，直接使html生效（自动打包）
	a.插件
		cnpm i webpack-dev-server --save-dev -g			  --全局安装
	b.（可选）修改启动时的默认文件目录，默认文件名index.html
		"scripts":{
			"dev" : "webpack-dev-server --contentBase src"
		},
	c.（可选）修改端口，以及自动启动
		"scripts":{
			"dev" : "webpack-dev-server --port 8888 --open"
		}
    d.启动方式一：自动将打包后的boundle.js ->加载到内存中（boundle.js）
    	webpack-dev-server
    e.启动方式二：将webpack-dev-server命令配置到package.json中，然后npm run dev
  		npm run dev

1.3 es6

01.ES6回退ES5版本，NodeJS需要通过转换器自动搞定
	a.转换器
    	.babelrc{
        	"presets":['es2015']
   		}
   	b.安装转换器
   		cnpm install babel-preset-es2015 --save-dev
   	c.安装命令行工具
   		cnpm  install babel-cli -g
	d.使用
		正常：node xxx.js
		个别：如果遇到Nodejs不支持的ES6，则切换使用：babel-node xxx.js
			 报错解决：管理员身份打开powerShell，输入set-ExecutionPolicy RemoteSigned，选A或Y

1.4 restful

1.5 swagger

01.Swagger-Editor（http://editor.swagger.io/）
	a.下载
		https://swagger.io/tools/swagger-editor/download/
	b.安装
		解压swagger-editor-master后，在package.json文件所在目录执行：npm install
	c.如果报错Error: Can't find Python executable "python", you can set the PYTHON env variable
		解决一：安装Python 2.x   
		解决二：安装丢失的环境即可， a.管理员身份启动cmd
								b.npm install --global --production windows-build-tools

02.Swagger-UI
	a.下载
		https://swagger.io/tools/swagger-ui/download/
	b.运行Swagger-UI时，需要安装nignx代理
		将swagger-ui-master.zip中的dist目录的全部文件 -> 拷贝到nignx中的html目录中（注意：清空原html目录文件）
	c.启动Swagger-UI
    	nginx.exe（建议cmd方式启动，start nginx.exe）
    d.导出/导入
		Swagger-Editor编辑 -> 导出yaml -> 放入nginx/html目录中 -> Swagger-UI中查找

1.6 mock.js

1.7 easymock

01.nodejs
	a.下载
		wget https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz
	b.解压
		tar -xvJf node-v8.9.1-linux-x64.tar.xz
	c.重命名
		mv node-v8.9.1-linux-x64 node
	d.配置环境变量
		vi /etc/profile
		export PATH=$JAVA_HOME/bin:/apps/node/bin:/apps/mongodb/bin:$PATH
		source /etc/profile

02.MongoDB
	a.下载
		curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.6.4.tgz
	b.解压
		tar -zxvf mongodb-linux-x86_64-3.6.4.tgz
	c.重命名
		mv mongodb-linux-x86_64-3.6.4 mongodb
	d.配置环境变量
		vi /etc/profile
		export PATH=$JAVA_HOME/bin:/apps/node/bin:/apps/mongodb/bin:$PATH
		source /etc/profile
	e.配置存储数据、日志
		cd mongodb/
		mkdir data
		touch logs
	f.启动
	    bin/mongod --dbpath=/apps/mongodb/data --logpath=/apps/mongodb/logs --port=27017 &

03.redis
	a.下载
		wget http://download.redis.io/releases/redis-4.0.0.tar.gz
	b.解压
		tar -zxvf redis-4.0.0.tar.gz
	c.重命名
		mv redis-4.0.0 redis
	d.编译
		cd redis/
		yum install gcc-c++
		make MALLOC=libc
    e.配置redis.conf
    	daemonize yes
    f.启动
    	src/redis-server redis.conf &
		src/redis-cli -p 6379

04.easymock
	a.下载git
		yum install -y git
	b.克隆项目
    	git clone https://github.com/easy-mock/easy-mock.git
    c.安装npm
    	npm install -g cnpm --registry=https://registry.npm.taobao.org
    	cnpm install（如果无法使用npm，刷新环境变量source /etc/profile）
    d.启动
    	npm run dev
    e.测试
    	http://192.168.2.128:7300

2 element

2.1 环境搭建

01.环境搭建
    a.克隆项目
        git clone https://github.com/PanJiaChen/vue-admin-template.git
    b.进入项目目录
        cd vue-admin-template
    c.安装依赖
        npm install
    d.建议不要直接使用 cnpm 安装以来，会有各种诡异的bug。可以通过如下操作解决npm下载速度慢的问题
        npm install --registry=https://registry.npm.taobao.org
    e.启动服务
        npm run dev

2.2 数据源

01.数据源
    a.请求
        http://192.168.2.128:7300/mock/5ed066a8c0cb2940f5b4f7d1/myeasymock
        {
          "code": 20000,
          "data": {
            "token": "admin-token"
          }
        }
    b.响应
        {
          "code": 20000,
          "data": {
            "roles": ["admin"],
            "introduction": "I am a super administrator",
            "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
            "name": "汐炎"
          }
        }

2.3 全部查询

2.4 分页查询

2.5 条件查询

2.6 增加活动：Dialog对话框 + 下拉列表 (学校)

2.7 修改活动 = 根据ID查询 + 修改数据

2.8 删除活动 = 根据ID删除

2.9 功能性组件 + 图片上传

3 nuxt

3.1 环境搭建

01.环境搭建
    a.克隆项目
        git clone https://github.com/nuxt-community/starter-template.git
    b.进入package.json页面
        cd starter-template-master/template
    c.安装依赖
        npm install
    d.启动服务
        npm run dev

3.2 axios、share.js

01.axios环境搭建
	cnpm install axios --save
	
02.share.js环境搭建
	https://github.com/overtrue/share.js
	https://blog.csdn.net/liwenfei123/article/details/78952337