5.创建Vue项目
方式一：命令行（不推荐）
方式二：图形化
先找到项目想要创建的位置，去到该目录下，输入cmd回车
输入 vue ui回车
可能会遇到的问题：Failed to get response //代码效果参考：http://www.zidongmutanji.com/bxxx/21650.html
from /vue-cli-version-marker解决办法：
找到 .vuerc文件，位置在C:\Users\当前用户.vuerc
将packageManager修改如下：
原因是本地hadoop环境变量回合vue项目有冲突，他们都要用到yarn集群
修改后再重新输入vue ui，没有报错信息且自动打开Vue项目管理器的页面
点击创建-->在此创建新项目
出现这个页面就创建完成
将创建好的vue项目
项目目录结构说明
6.Vue项目的启动
方法一：图形化界面启动
方法二：命令行
方法一：
Vue项目执行流程
在工程化项目中，vue要做的事情就是通过main.js吧App.vue渲染到index.html
的指定区域中09、前端工程化-Vue项目执行和开发流程_哔哩哔哩_bilibili
可能出现的问题：
vscode中vue代码全灰且没有代码提示 - 201812 - 博客园 (cnblogs.com)
7.Element
基于Vue2.0的桌面端组件库
组件：组成网页的部件，入超链接按钮图片表格等。
安装ElementUI组件库，在当前工程的目录下安装ElementUI组件库
指定版本安装：npm install element-ui@2.15.3
在main.js中引入Element UI组件库且使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
7.2使用
可能会出现的问题：版本不匹配的问题：
Error: Vue packages version mismatch: - vue@2.6.14 (D:\前端\vue01\node_modules\vue\dist\vue.runtime.common.js)- vue-template-compiler@2.7.14 (D:\前端\vue01\node_modules\vue-template-compiler\package.json) //代码效果参考：http://www.zidongmutanji.com/bxxx/54624.html
- 201812 - 博客园 (cnblogs.com)在src/views里面创建一个ElementView.vue组件
直接在ElementView.vue中编写代码即可
官方文档：
7.3基础组件使用
表单，直接在官网找代码
[/span>template
[/span>div
[/span>p
[/span>el-table
:data="tableData"
style="width: 100%"
[/span>el-table-column
prop="date"
label="日期"
Width＜/span>="180"
[/span>el-table-column
prop="name"
label="姓名"
Width＜/span>="180"
[/span>el-table-column
prop="address"
label="地址"
[/span>div class="block"
[/span>span class="demonstration"
[/span>el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="【100, 200, 300, 400】"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
[/span>script
export default{
data() {
return {
tableData: 【{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}】,
//分页条模型数据， currentPage当前页面
currentPage: 2
}
},
methods: {
handleSizeChange(val) {
console.log(每页 ${val} 条);
},
handleCurrentChange(val) {
console.log(当前页: ${val});
}
},
}
[/span>style
View Code
7.4案例
页面效果：
[/span>template
[/span>el-container style="height: 500px; border: 1px solid #eee"
[/span>el-aside Width＜/span>="200px" style="background-color: rgb(238, 241, 246)"
[/span>h1
[/span>el-menu :default-openeds="【'1', '3'】"
[/span>el-submenu index="1"
[/span>template slot="title"
i class="el-icon-message"
[/span>el-menu-item-group
[/span>el-menu-item index="1-1"
[/span>el-menu-item index="1-2"
[/span>el-container
[/span>el-header style="text-align: right; font-size: 12px"
[/span>el-dropdown
[/span>i class="el-icon-setting" style="margin-right: 15px"
[/span>el-dropdown-menu slot="dropdown"
[/span>el-dropdown-item
[/span>el-dropdown-item
[/span>el-dropdown-item
[/span>span
[/span>el-main
[/span>el-form :inline="true" :model="formInline" class="demo-form-inline"
[/span>el-form-item label="姓名"
[/span>el-input v-model="formInline.user" placeholder="姓名"
[/span>el-form-item label="性别"
[/span>el-select v-model="formInline.region" placeholder="性别"
[/span>el-option label="男" value="1"
[/span>el-option label="女" value="0"
[/span>el-form-item label="入职日期"
[/span>el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
</
