从零开始搭建vue+element-ui的前端开发框架

最近需要进行下前端开发，特此记录下前端开发框架搭建过程

1 安装node.js

官网下载安装即可 官网地址：http://nodejs.cn/download/

2 安装webpack

在命令行里面输入：npm install --global webpack 全局安装即可。

3 安装vue-cli 开发脚手架

在命令行里面输入：npm install -g @vue/cli 全局安装即可。
在命令行里面输入：npm i -g @vue/cli-init 全局安装即可。

4 创建项目并运行

在指定的目录下进入cmd界面 输入: vue init webpack webtest(项目目录名称)
然后一路enter即可。最后可以看见如下提示：

  cd webtest
  npm run dev

按照操作运行即可。最后会弹出项目运行地址，通常是：http://localhost:8080/#/ 进入地址就可以看见界面了。

5 引入element-ui

关闭项目，进入webtest文件夹，进入cmd命令行界面 输入： npm i element-ui -S 即可 安装element-ui
最后打开修改/src/main.js文件，引入element-ui

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

然后就可以在代码里面愉快的进行开发了。