# vue_shop

**Repository Path**: javafdx/vue_shop

## Basic Information

- **Project Name**: vue_shop
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-11-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

###大一统的模块化规范-es6模块化
1.node.js中通过babel体验es6模块化
npm安装
babel.config.js
###ES6模块化的基本语法
1.默认导出与导入
export default
import 接收名称 from '模块标识符'
2.按需导出--export let s1 = 'aaa'

 ####直接导入并执行模块代码
 我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码
 
当前文件模块为m2.js
在当前模块中执行依据各for循环操作
for(let i = 0; i< 3; i++) {
    console.log(i)
}
//直接导入并执行模块代码
import './m2.js'

###奇偶隔行变色--表格

index.js
import $ form 'jquery'
$(function() {
    $('li:odd').css('backgroundColor', 'pink')
    $('li:even').css('backgroundColor', 'lightblue')
})
------index.html
<script src="./index.js"></script>
<ul>
<li></li>
</ul>

###配置打包的入口文件为src -> index.js
打包的输出文件为 dist -> main.js

###自定义配置--修改端口号-自动打开浏览器
不建议在package.js中设置，因为他是管理包的文件
 package.js
   "vue": {
    "devServer": {
      "port": 8888,
      "open": true
    }
  }
  创建单独的配置文件配置项目
  在跟目录创建文件vue.config.js
module.exports = {
  devServer: {
    // 自动打离开浏览器
    open: true
  }
}

###Element-ui的安装
npm i element-ui -S
导入相关资源
// 导入组件库---main.js
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/li b/theme-chalk/index.css';
// 配置vue插件

###配置ui插件，实现按需导入，从而减少打包后的体积
vue-cli-plugin-element 安装
配置-将fully inport默认导入修改为-按需导入import on demand 
就会自动生成plugins文件夹-element.js

###phpStudy 2016



###停止Apache服务，只启动 Mysql
压缩包--vue_api_server
将db文件夹中的mydb.sql文件导入
Mysql管理器--Mydwl导入导出
查看是否导入成功--其他选项菜单--查看数据库目录

###启动api服务
cmd --npm install
启动接口项目--node .\app.js

###前后端存在跨域问题
通过token方式维持状态
没有跨域--通过cookie在客户端记录状态，通过session在服务器端记录状态

###创建分支--新功能
git checkout -b login名字
查看全部分支
git branch

###开发环境下安装less-loader   less 两个依赖


###在assets中设置去全局样式
创建css文件夹--global.css


###引入阿里图标
fonts文件


###启动phpstudy
运行资料文件下的node .\app.js


### git status  
git add .
git commit -m "完成登陆功能"
git branch


git remote add origin https://gitee.com/javafdx/vue_shop.git
git push -u origin master  

###将分支代码合并到主分支master,分支为login
切换分支
git checkout master
//合并
git merge login

将合并好的推送到push
git push

第一次将login分支推送到云仓库
git checkout login
git push -u origin login


本地新建子分支--云仓库没有(建议每次编写新功能创建一个分支)
git checkout -b user
将本地分支上传到云端-云端暂时没有这个分支
git push -u origin user

### 将分支合并到主分支
切换到master主分支
git checkout master
git merge user
git push
### 通过axios请求拦截器添加token,保证拥有获取数据的权限
// axios请求拦截
axios.interceptors.request.use(config => {
  // 为请求头对象，添加Token验证Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})


### 安装插件--vue-table-with-tree-grid
npm i vue-table-with-tree-grid -S
yarn add vue-table-with-tree-grid
 导入--自动注册
 import ZkTable from 'vue-table-with-tree-grid'
 Vue.use(ZkTable)
 或者--手动注册--使用第二种main.js
  import ZkTable from 'vue-table-with-tree-grid'
  Vue.component(ZkTable.name, ZkTable)