vue/vue实战/vue cli3.0+element+mangoDB/前端工程搭建

vue create vue-cli3-project: https://juejin.im/post/5c4a6fcd518825469414e062#heading-14

npm install -g @vue/cli
vue create vue-cli3-project
全局组件自动注册
路由自动引入
自动扫描子模块路由并导入
通过node来生成组件
axios封装
UI框架引入 —-iview

import ViewUI from ‘view-design’

import ‘view-design/dist/styles/iview.css’

Vue.use(ViewUI)
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

vue.config.js 配置别名

const path = require("path");
 		const axios = require('axios');
			const resolve = dir => {
       return path.join(__dirname, dir);
     };
	module.exports = {
       chainWebpack: config => {
       // 别名
       config.resolve.alias
         .set("@", resolve("src"))
         .set("@components", resolve("src/components"))
         .set("@api", resolve("src/api"))
         .set("@views", resolve("src/views"))
         .set("@assets", resolve("src/assets"))
         .set("@scripts", resolve("src/assets/js"));
       }
	}

本地mock数据: https://juejin.im/post/5bf42dec6fb9a049df23af4b

3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源。在pubic下创建mock文件夹
在mock文件夹下创建user.json文件(文件名不要含有_，找了大半天的404问题😢)
浏览器直接访问该文件看是否有返回数据 http://localhost:8080/mock/user.json

vue.config.js 配置

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/mock'
        }
      }
    }
  }
}

通过axios访问即可

1
2
3

this.$axios
   .get('/api/user.json')
   .then(this.handler)

遇见的问题
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

这个错误一般情况下是在vue版本和vue-template-compiler版本不一致的情况下才会报出；
例如你输入如下命令更新vue版本时，重新npm install vue-template-compiler -D