建立一个vue+element的前后分离前端

开发环境

1, 开发工具

WebStorm或Visual Studio Code

2, 下载安装nodejs

项目搭建

1.新建一文件夹

2.安装npm

打开Visual Studio Code, 打开文件夹vueDemo或直接用cmd命令行运行指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装脚手架

npm install vue-cli -g

4.安装webpack

vue init webpack

5.安装相关依赖

npm install

6.运行项目

npm install

配置访问后端路由

'/': {
        target: 'http://localhost:8088',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }

添加element-ui

1.导入依赖

npm install --save element-ui

2.在main.js文件中全局配置

import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

在页面中完全引入

	import $ from 'jquery'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'

完全引用可能会导致项目面积过大，可进行按需引入详细请看element-ui官方文档