vue全家桶搭建后台系统（小菜鸟篇一）

一、前言
一直在vue的门边徘徊的小菜鸟终于下定决心来继续深入学习啦（👏🏻👏🏻👏🏻👏🏻👏🏻），小菜鸟公司用的技术栈有点年纪了(ExtJs),但是对于后台管理系统来说功能还是很齐全的，优点很多，缺点也多（不褒不贬）,想了解的小伙伴可以去了解下哈（可能不多😂😂😂）。好了，不说废话了，小菜鸟正式开始干活了。💪🏻💪🏻💪🏻💪🏻💪🏻
二、踩坑成长史
1、首先搭建属于小菜鸟的项目工程
初始化：(环境配置：node(v11.12.0)、npm(6.11.3)、 vue、vue-cli (@vue/cli 4.2.3)这里就不说了，环境配置好之后就可以开始下面的步骤了,括号对应小菜鸟自己本地的版本哈 )
创建项目：

vue create hello-world

运行项目：

cd vueDemo; 
npm install;
 npm run dev;

到这里，项目就搭起来啦

小菜鸟的项目目录（有开发时增加的文件及目录）

git init  //初始化版本库
git remote add origin https://gitee.com/xxxx/vue-manage.git   //把本地的文件夹映射绑定到你的仓库地址
git pull origin master  拉取/更新该Git 项目的文件
git add .    //把本地所有没有版本号的文件加到队列中  
或者
git add ./xx 文件夹  //多个用空格隔开
git commit -m "第一次提交”  把新增队列中的及修改、删除的文件提交到仓库
git push origin master  把仓库中的文件推到 master源
git rm ./文件   //多个用空格隔开，然后再 commit 再推到 master。rm只是把本地的干掉了。
git branch dev-xxx(分支名) //创建分支
git checkout dev-xxx(分支名)//切换分支

问题：操作中把本地分支删除（小菜鸟心态有点崩🙀）
解决：
输入 git log -g ，找回之前提交的commit,并记下commit_id
git branch newbranch（分区名）commit_id（提交id）

问题：合并分支问题，一直返回Already up-to-date（搞了半天，一直不行😤）
解决：
开发分支（dev）上的代码达到上线的标准后，要合并到 master 分支

git checkout dev
git pull
git checkout master
git merge dev
git push -u origin master

当master代码改动了，需要更新开发分支（dev）上的代码

git checkout master 
git pull 
git checkout dev
git merge master 

接下来的就是具体的开发过程和遇到的问题啦；
头疼问题一：配置不同环境下的baseUrl和不同环境下的一些参数【生产环境、开发环境、测试环境】
解决：在与package.json的同级目录下创建三个文件.env.uat / .env.development / .env.production【用来判断不同的环境】
.env.uat

NODE_ENV=production
VUE_APP_BASE_API=https://xxx.com
VUE_APP_ENV=uat

.env.development

NODE_ENV='development'
VUE_APP_BASE_API='http://192.168.0.208:6007'

.env.production

NODE_ENV=production
VUE_APP_BASE_API=https://www.xxx.com
VUE_APP_ENV=production

axios
api/index.js

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BASE_API;

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "uat-build": "vue-cli-service build --mode uat"
  },

条件判断

if(process.env.VUE_APP_ENV === 'production'){}else if(){}

baseUrl配置好了，浏览器跨域问题也得解决一下
小菜鸟项目中的配置vue.config.js(vue-cli3需要自己手动添加该文件在项目根目录下)

module.exports = {
	publicPath: '/', //根路径
	outputDir: 'dist', //构建输出目录
	assetsDir: 'assets', //静态资源目录（js,css,img,fonts）
	lintOnSave: false, //是否开启eslint保存检测，有效值：true||false||'error'
	devServer: {
		open: false, //运行是是否自动打开浏览器
		host: 'localhost',
		port: 8082, //默认端口号
		hotOnly: false,
		/* 热更新 */
		proxy: {
			//配置跨域
			'/api': {
				target: process.env.VUE_APP_BASE_API, //接口地址
				// ws: true,
				changOrigin: true, //允许跨域
				pathRewrite: {
					'^/api': '' 
				}
			}
		}
		
	}}

对应的axios

import axios from 'axios'
// 创建axios实例
let service = axios.create({
	baseURL: '/api', // api的base_url
	timeout: 5000 // 请求超时时间
})

公用样式全局引用问题
小菜鸟为了方面修改一些样式变量和公共样式又不想每次去import引入

npm install sass-resources-loader

修改vue.config.js vue-cli3的配置(其他版本和webpack配置配置说明参考官网：https://www.npmjs.com/package/sass-resources-loader)

module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          resources: './path/to/resources.scss',
 
          // Or array of paths
          resources: ['./path/to/vars.scss', './path/to/mixins.scss']
        })
        .end()
    })
  }
}

好了，这就是今天小菜鸟的踩坑史啊，小菜鸟不会放弃的。下次再见啦啦啦啦啦啦啦啦。。。