Vue脚手架安装

执行以下命令安装并检验

C:\Users\Administrator>node -v
C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org
C:\Users\Administrator>npm config get registry
C:\Users\Administrator>npm install vue-cli -g
C:\Users\Administrator>vue -V
C:\Users\Administrator>where vue

创建vue项目过程

指定workspace：最好别放c盘
在存放worksapce指定的位置：执行cmd回车，执行了命令
初始化了一个vue项目：vue init webpack 项目名称回车，正确的选择yes、no
此时需要一定的时间去等待下载vue项目结构

自定义组件：

创建Car.vue组件（src/components里）<template>只能有一个跟级标签

<template>
? <h1>
??? {{msg}}
? </h1>
</template>

<script>
? /* 支持导出的自定义组件*/
? export default{
??? name : 'Car',
??? data(){
????? return{
??????? msg : "hello componets~~"
????? }
??? }
? }
</script>

<style>
</style>

修好App.vue文件

导入自定义组件
添加指定的组件
使用自定义组件，本质就是一个标签

<template>
? <div id="app">
??? <img src="./assets/logo.png">
??? <Car></Car>
? </div>
</template>
<script>
? //导入自定义组件+./
?import Car from './components/Car.vue'
?export default {
? name: 'App',
? components:{//添加自定义组件
??? Car
? }
}
</script>

测试！！！

启动服务器: npm run dev
打开浏览器访问:http://localhost:8080

ElementUI 元素

第一步：npm i element-ui -S 下载安装

第二步，修改main.js,引入ElementUI

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'
Vue.use(ElementUI);
Vue.config.productionTip = false

测试修改Car.vue文件！~观察页面效果！

（参考Element丰富页面）

第一，展示图标。

?? <i class="el-icon-phone"></i>
?? <i class="el-icon-share"></i>
?? <i class="el-icon-delete"></i>
?? <i class="el-icon-delete-solid"></i>

第二，layout栅栏的效果

el-row一行，一行默认24列，el-col是一列，span可以自定义合并的列数！

<el-row>
????? <el-col :span="12">韩云</el-col>
????? <el-col :span="12">韩云</el-col>
??? </el-row>
??? <el-row>
????? <el-col :span="8">hello</el-col>
????? <el-col :span="8">hello</el-col>
????? <el-col :span="8">hello</el-col>
??? </el-row>

第三，按钮的效果

type修饰按钮的颜色！icon可以加图片！circle是一个圆形！

<el-button-group>
???? <el-button type="primary" icon="el-icon-arrow-left" >上一页</el-button>
???? <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
?? </el-button-group>

第四，输入框的效果

placeholder是提示信息，v-model体现了双向绑定，clearable可清空，show-password密码输入框

<el-input placeholder="请输入用户名" v-model="msg" ></el-input>
??? <el-input placeholder="请输入用户名" v-model="msg" show-password></el-input>
??? <el-input placeholder="请输入用户名" v-model="msg" clearable></el-input>

?第五，table表格的效果

label是列名！表格里的数据放在data里，:data="要获取的数据" stripe实现斑马纹的表格显示

prop是要获取数据哪个属性的值

<el-table :data="arr" stripe>
?? <el-table-column label="编号" prop="id"></el-table-column>
?? <el-table-column label="姓名" prop="name"></el-table-column>
?? <el-table-column label="年龄" prop="age"></el-table-column>
?</el-table>

//准备多个数据！！！

<script>
? export default{
??? name:'Car',
??? data(){
????? return{
??????? msg:'Welcome to Your Vue.js App',
??????? arr : [
??????? {id:100,
??????? name:'hy',
??????? age:20,
??????? },
??????? {id:100,
??????? name:'hy',
??????? age:20,
??????? },
??????? {id:100,
??????? name:'hy',
??????? age:20,
??????? },
????? ]
????? }
??? }
? }
</script>

测试如下图所示！！模仿Element代码！

?创建maven工程

File-New-Project-选中Maven-next-输入工程名和GroupId-Finish
打开里面的pom.xml文件，添加jar包的位置，交给Maven进行下载
必须进行刷新，否则不下载

?
??? <dependencies>
??????? <dependency>
??????????? <groupId>mysql</groupId>
??????????? <artifactId>mysql-connector-java</artifactId>
??????????? 
??????????? <version>5.1.48</version>
??????? </dependency>
??? </dependencies>