vue脚手架进行模块化开发和elementUI快速开发

1、vue模块开发（前提：需要安装node.js和npm环境）

1）安装webpack环境

打开cmd，输入一下命令（-g 是全局安装）：

npm install webpack -g

2）全局安装vue脚手架

输入一下命令：

npm install -g @vue/cli-init

如果通过 vue -V,提示vue不是内部命令也不是外部命令，网上都说是系统环境变量配置的问题，可是我的vue.cmd文件都没有生成，所以用npm install -g vue-cli 命令安装后就成功了。

3）初始化vue项目

vue init webpack appname: vue脚手架使用webpack模板初始化一个appname项目。比如我创建一个vue-demo的项目。

vue init webpack vue-demo

目录或文件	描述
bulid	里面是一些操作文件，使用npm run * 时执行的就是这里的文件。
config	配置文件，执行文件需要的配置信息。例如运行的端口，IP等等信息。
src	资源文件，所有的组件以及所用的图片都是在这个文件夹下放着，看一下这个文件夹都放了哪些东西。
assets	资源文件夹，放图片之类的资源。
components	组件文件夹，写的所有组件都放在这个文件夹下。
router	路由文件夹，这个决定了页面的跳转规则。
App.vue	应用组件，所有自己写的组件，都是在这个组件之上运行了。
main.js	webpack入口文件。
static	静态文件。
index.html	首页。
package.json	依赖包。

4）启动vue项目

项目的package.json中有scripts，代表我们能运行的命令。npm start = npm run dev: 启动项目。npm run build：将项目打包，我们来启动vue-demo的项目。

5）使用启动的默认端口访问，输入localhost:8080

2、整合elementUI快速开发

1）安装ElementUI

npm i element-ui -S

2）引入 Element

在 main.js 中导入以下内容

3）使用element的组件

比如单选框的使用。

页面显示

4）element的Container 布局容器

①、将官网的demo放入App.vue中

②、创建MyTable.vue并添加路由

③、点击用户列表和Hello菜单，跳转对应的路由。