程序员必知：vue项目创建和启动、ElementUI的安装和快速学习

5.创建Vue项目

方式一：命令行（不推荐）

方式二：图形化

先找到项目想要创建的位置，去到该目录下，输入cmd回车

输入 vue ui回车

可能会遇到的问题：Failed to get response //代码效果参考：http://www.zidongmutanji.com/bxxx/21650.html

解决办法：

找到 .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

在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="结束日期"

</