vue-cli3脚手架快速开发系统

cloudtian commented 5 years ago

vue-cli

vue-cli3配置
安装npm install -g @vue/cli

如果需要对单个.vue文件进行快速原型开发还需要安装一个全局扩展npm install -g @vue/cli-service-global

创建项目vue create project_name

安装和调用 Vue CLI 插件 vue add plugin_name (example:vue add @vue/eslint)

cloudtian commented 5 years ago

Mint UI

Mint UI 组件文档基于vue 移动端的ui框架

安装npm install --save mint-ui 全局引入

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

按需引用 需要借助babel-plugin-component
安装npm install babel-plugin-component -D 编辑.babelrc文件：（这里有坑，看注意事项）

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

引入

import Vue from 'vue'
import { Button } from 'mint-ui'
Vue.component(Button.name, Button) // 或者 Vue.use(Button)

注意事项：

使用vue-cli3创建的项目可以通过 babel.config.js 配置使用任何其它 Babel 预设选项或插件。 babel.config.js文件内容如下：
```
module.exports = {
presets: [
'@vue/app'
]
}
```
将配置配好后，运行发现报错Error: Cannot find module 'babel-preset-es2015' 经搜索发现babel-preset-es2015已废弃，已经改为babel-preset-env; 而我们的默认presets配置@vue/app中已包含了babel-preset-env的配置
所以此处["es2015", { "modules": false }]是多余的最终配置为babel.config.js：
```
module.exports = {
presets: [
'@vue/app'
],
plugins: [
["component", {
    "libraryName": "mint-ui",
    "style": true
}]
]
}
```

cloudtian commented 5 years ago

axios

Axios使用文档 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装npm install axios 将其绑定到Vue原型上更方便使用

import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$axios = axios;

cloudtian commented 5 years ago

Mock

Mockjs文档 Mock.js 是一款模拟数据生成器

安装 npm install mockjs -D

配置 动态数据 如下，即可通过axios.get('/api/data')获取数据

import Mock from 'mockjs'
Mock.mock('/api/data', {
    'age|1-100': 100
})

配置 静态数据 在vue.config.js配置代理

devServer: {
        proxy: {
            '/api/': {
                target: 'http://localhost:8080/',
                pathRewrite: {
                    '^/api': '/mock'
                }
            }
        }
    },

在public目录下创建mock文件夹，用于存放静态数据
在mock文件夹下新建info文件，内部存放json数据，即可通过axios.get('/api/info')获取

cloudtian / blogs