Vue-CLI Promise

作用：

搭建项目工具，搭建vue的标准，集成webpack配置，一套标准进行开发
下载一个模板项目

安装

1. 安装vue-cli 3.xx

npm install -g @vue/cli

2. 卸载 vue-cli

npm uninstall vue-cli -g

3. 查看版本

vue --V

4. 创建项目

vue create  项目名

• 创建项目时的问题
  
• 选择自定义模式
  
  
• 历史路由选择安装，css预处理器选择第一个

• 检查，格式化代码选择最后一个

• 语法的检测方式，选择第一个
  
• 把配置放在独立的文件中，选择第一个
  

bable 是兼容性 eslint 是格式

根据提示，进入项目并运行命令

项目结构

启动项目

    "serve": "vue-cli-service serve",    //启动项目
    "build": "vue-cli-service build",      //打包
    "lint": "vue-cli-service lint",            // 使用 Eslint 进行检查并修复代码的规范
    "inspect": "vue-cli-service inspect"  //来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）

自定义配置

根目录下新建 vue.config.js

module.exports={
    devServer: {
        port: 8001, // 端口号，如果端口被占用，会自动提升 1 
        open: true, // 启动服务自动打开浏览器 
        https: false, // 协议
        host: "localhost", // 主机名，也可以 127.0.0.1 或 做真机测试时候 0.0.0.0
    },
    lintOnSave: false, // 默认 true, 警告仅仅会被输出到命令行，且不会使得编译失败。
    outputDir: "dist2", // 默认是 dist ,存放打包文件的目录, 
    assetsDir: "assets", // 存放生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir) 目录 
    indexPath: "out/index.html", // 默认 index.html, 指定生成的 index.html 的输出路径 (相对于 outputDir)。
    productionSourceMap: false, // 打包时, 不生成 .map 文件, 加快打包构建
}

继续安装 全家桶

• 生产库 安装 axios 用来处理异步请求

npm install -S axios

• 生产库安装 pubsub 用来非父子组件传值（兄弟）

npm i -S pubsub-js

• 生产库安装 VueX

# 安装依赖
npm install --save vuex

安装 Element

• 安装

npm i -S  element-ui

封装 axios 以及跨域问题

• src 下面新建 utils 里面存放工具 request.js

import axios from 'axios'
// axios.get('/db.json').then(response=>{
//     console.log(response.data)
// })
const request = axios.create({
    // baseURL:'dev-api',
    baseURL:'/',
    timeout:5000
})
request.get('/db.json').then(response=>{
    console.log(response.data)
})
// request拦截器
request.interceptors.request.use(config => {
    return config
}, error => {
    return Promise.reject(error)
})
  // response拦截器
request.interceptors.response.use(response => {
    return response
}, error => {
    console.log(error)
    return Promise.reject(error)
})
export default request

• Promise es6语法，回调函数

   new Promise((resolve,reject)=>{
                return login(form.username.trim(),form.password.trim()).then(response=>{
                    const resp = response.data
                    commit('SET_TOKEN',resp.data.token)
                    resolve(resp)
                }).catch(error =>{
                    reject(error)
                })
            })