Vue项目配置和安装依赖包

                                    环境配置

1、window安装node.js
检查是否安装成功：node -v 和 npm -v
2、注册一个GitHub账号，GitHub：https://github.com/
3、到git官网：https://git-scm.com/ 下载安装git

image.png

在cmd输入：git --version 出现版本号就代表安装成功
4、在GitHub创建Create a new repository

image.png

5、SSH keys，生成SSH keys参考：https://blog.csdn.net/tanzhengyu/article/details/51064380
注：打开Git Bush here的方法是在桌面，点击右键，打开git bush。
6、打开创建的项目，例：https://github.com/xxb87089890/Travel，点击clone or download，用cmd把项目克隆到本地

image.png

7、cmd切换到Travel目录的上一级，创建一个Travel项目，https://www.jianshu.com/p/6c951a484e11

image.png

                                   git的使用

git命令：
git status 查看本地需要push的文件
git add . 增加到本地的缓冲区
git commit -m 'delete mesage'
git push 上传
git pull 下载

git分支：新开发的功能需要创建一个git分支，然后在分支上进行代码开发，等开发完之后把分支上的代码合并到master主分支上。
1、查看本地分支：

git branch
* master

*标识的是你当前所在的分支。
2、查看远程分支
git branch -r
3、查看所有分支
git branch -a
4、本地创建新的分支
git branch [branch name]
5、切换到新的分支
git checkout [branch name]
6、创建分支的同时切换到该分支上
git checkout -b [branch name]
git checkout -b [branch name] 的效果相当于以下两步操作：

git branch [branch name]
git checkout [branch name]

7、将新分支推送到github
git push origin [branch name]
8、删除本地分支
git branch -d [branch name]
9、删除github远程分支
git push origin :[branch name]
10、合并分支到master
先切换到master git checkout master
git merge origin/[branch name]
11、代码更新到分支：https://www.cnblogs.com/xinmengwuheng/p/7115549.html
(分支) git checkout master
(master) git pull
(master) git checkout feature
(分支) git merge master

git add .
git commit -m "修改原因"
git push
git checkout master
git merge origin/分支名称
git push

注意：
代码上传git，在gitgnore默认不上传node_modules/和/dist/，所以，如果在其他的机子上需要执行命令npm install，把一些依赖包安装上去。

github更新代码问题：
如果有2个账号，家里的git账号和公司的不一样，先打开家里的账号找到项目，点击Fork，把家里账号的项目拷贝到公司git账号，然后git clone，npm install，当代码有修改，commit push之后，在github点击pull requests-->new pull request-->Create pull request，登录家里账户，点击pull requests-->Merge pull request，然后代码在家里git pull即可，在公司git账号
git remote add upstream clone地址
git fetch upstream
git commit -a -m ’更新原因'
git push 'fork出来的地址‘
参考：https://www.zhihu.com/question/28676261
https://www.cnblogs.com/zknublx/p/5983630.html

                                   安装SCSS编译环境

安装scss：https://blog.csdn.net/lily2016n/article/details/75309492
报错解决：https://blog.csdn.net/ty_0930/article/details/70184392
1、安装sass的依赖包：

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

报错输入命令：npm install node-sass 因为windows平台缺少编译环境
2、在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}

3、在APP.vue中修改style标签
<style lang="scss">
然后运行npm run dev

                                   安装和引入全局scss

1、先安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
2、安装node-sass、sass-loader、style-loader

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev

3、安装sass-resources-loader
cnpm install sass-resources-loader --save-dev
4、修改build中的utils.js

    scss: generateLoaders('sass')

    修改成:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/global.scss')
        }
      }
    )

参考：https://www.cnblogs.com/wuzhendong/p/8078659.html
https://www.cnblogs.com/crazycode2/p/6535105.html

                                   安装iconfont

1、到iconfont官网下载icon，把 .eot 、.svg 、.ttf、.woff四个文件拷贝到assets->styles-iconfont下，把iconfont.css放到styles目录下，修改iconfont.css引用路径，在main.js引入 import './assets/styles/iconfont.css'
<i class="iconfont">icon代码</i>