代码运行环境安装
NodeJs
利用nvm安装和在多个Node.js版本之间切换
npm更换源与yarn类似
$ npm install -g cnpm --registry=https://registry.npm.taobao.org //下载cnpm
$ npm config set registry https://registry.npm.taobao.org
Ruby
- 下载Ruby安装包,官网地址,在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby
- RubyGems 镜像- Ruby China更换Ruby下载源
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/ //删除默认源,添加镜像源
$ gem sources -l //显示更换后的下载源
https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org
- 安装Sass的gem,
gem install sass
开发软件下载安装
WebStorm
Visual Studio Code
前端次要开发编辑器,拥有很多好用插件,可以当一个很不错的编辑器使用
yarn
npm的替代品,操作的指令更加简单,可以使用安装包进行安装,不过安装包经常下载失败。
1. 安装包下载:链接地址 密码:drtf (失败则使用步骤2)
2. npm下载cnpm,然后用cnpm下载yarn。cnpm install yarn -g//安装yarn
3. yarn更换下载源
yarn config get registry // 查看下载源
yarn config set registry https://registry.npm.taobao.org //更换为淘宝源
Git
代码版本控制软件,可使用命令符进行控制。也可以加装SourceTree(git的图形界面版)
SourceTree 安装之后需要使用账号登陆以授权,因为墙的原因,无法登陆。这里记录一下跳过这个初始化的步骤。
1. 安装之后,转到用户本地文件夹下的 SourceTree 目录,没有则新建
%LocalAppData%\Atlassian\SourceTree\
2. 新建 accounts.json 文件
%LocalAppData%\Atlassian\SourceTree\accounts.json
3. 输入以下内容保存即可
[
{
"$id": "1",
"$type": "SourceTree.Api.Host.Identity.Model.IdentityAccount,
SourceTree.Api.Host.Identity",
"Authenticate": true,
"HostInstance": {
"$id": "2",
"$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountInstance, SourceTree.Host.AtlassianAccount",
"Host": {
"$id": "3",
"$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountHost, SourceTree.Host.AtlassianAccount",
"Id": "atlassian account"
},
"BaseUrl": "https://id.atlassian.com/"
},
"Credentials": {
"$id": "4",
"$type": "SourceTree.Model.BasicAuthCredentials,
SourceTree.Api.Account",
"Username": "",
"Email": null
},
"IsDefault": false
}
]
4. 现在再打开 SourceTree,直接显示主窗口了
5. git中配置autocrlf来正确处理crlf,防止发生报错。
$ git config --global core.autocrlf true
Git可以在你提交时自动地把行结束符CRLF转换成LF,而在签出代码时把LF转换成CRLF。用core.autocrlf来打开此项功能,如果是在Windows系统上,把它设置成true,这样当签出代码时,LF会被转换成CRLF
微信开发者工具
适用于微信公众号网页开发,微信小程序开发
搭建项目
项目配置文件 密码:2dxp
项目结构
project/
├── src/(生产环境代码)
├── docs/(开发文档)
├── dist/(开发环境代码)
├── sass/(scss文件,需要用sass转换)
├── js/(js文件,可能是es6格式,需要babel转换)
├── images/(图片,需要进行压缩)
├── plugins/(第三方插件)
├── .html(html页面,需压缩)
├── .gitignore(git忽略文件配置)
├── gulpfile.js(gulp任务文件)
├── package.json(node依赖包配置文件)
├── yarn.lock(node依赖包关系文件)
建立版本控制
- 创建SSH key
在户主目录下(C:/users/电脑名/.ssh/id_rsa),里面有id_rsa(私钥,不可泄露),id_rsa.pub(公钥,可以告诉任何人)- 如没有,则用Git Bash创建
$ ssh-keygen -t rsa -C "xuqipeter@qq.com"
然后一路回车,使用默认值即可- 登陆GtiHub=>Accout Settings=>SSH Keys页面=>点Add SSH Key=>填上任意Title,在key文本框里粘贴id-rsa.pub的内容
- 在码云或者GitHub创建仓库(公司可以用码云,私人可以用GitHub)
- 设置本地仓库,并创建版本。
$ git config --global user.name "xuqipeter" //全局设置用户名字
$ git config user.email "xuqipeter@qq.com" //全局设置用户邮箱
$ git init //建立本地仓库
$ git -A //添加全部文件
$ git commit -m "提交的相关说明" //创建本地仓库版本
- 添加远程仓库 教程点击这里
$ git remote add origin git@github.com:/github用户名/learngit.git //远程仓库名字默认为origin
$ git fetch origin master //拉取远程master分支
$ git branch -a //查看所有分支
$ git merge origin/master //合并远程分支,pull=fetch+merge
$ git push -u origin master //把本地内容推送到远程库上
pull:本地<=远程
push:本地=>远程- 从远程库克隆
git clone git@github.com:/github用户名/learngit.git
- ### 安装依赖包
- 使用yarna安装依赖包(node_modules文件夹)
$ yarn init
$ yarn install
- 可能遇到的问题,请百度解决。
创建生产环境代码
- 使用gulp(在webstorm中设置node环境为6.x.x版本)
因为gulp已经开始过时,所以不再继续更新gulpfile.js,以后会替换为webpack- 在html中的css和js链接末尾添加
?rev=@@hash
,自动生成版本号- css和js文件合并(build:js asset/js/p-cruise-line.js是合并后的文件路径)
<!-- build:js asset/js/p-cruise-line.js?rev=@@hash -->
这里放要合并的文件
<!-- endbuild -->