项目结构

scr文件夹：写业务

src/components：定义组件

src/router：定义路由

src/App.vue：注册组件

src/main.js：入口js

index.html：项目主页

自定义组件

src/components内新建组件

<template><!-- 1.html代码 -->
<h1>{{msg}}</h1>
</template>
<script>/* 2.js代码 */
// 可导出
export default{
  name:'Car',
  data(){/* 必须声明称一个函数 */
    return{
      msg:'欢迎光临'
    }
  }
}
</script>
<style>/* 3.css代码 */
</style>

修改App.vue注册组件

<template>
  <div id="app">
    <!-- 4.使用自定义组件-->
    <Car></Car>
  </div>
</template>
<script>
  // 1.导入自己的组件
  import Car from './components/Car.vue'
export default {
  name: 'App',
  // 2.使用组件(类似于局部组件的语法)注册组件
  components:{
    Car/* 3.使用了第一步的名字 */
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

测试

1.启动项目： npm run dev

2.打开浏览器测试效果

element-ui  导入main.js

import ElementUI from 'element-ui';/* 导入下载好的element-ui */
import 'element-ui/lib/theme-chalk/index.css';/* 导入下载好的element-css */
Vue.use(ElementUI);/*  */

使用elementui标签

1.Layout布局  默认一行24个分格

<!-- 1.Layout布局  默认一行24个分格-->
<el-row>
<el-col :span="8">品牌</el-col>
<el-col :span="8">价格</el-col>
<el-col :span="8">描述</el-col>
</el-row>

2.图标

<!-- 1.使用图标 -->
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-s-home"></i>
<i class="el-icon-loading"></i>

3.按钮

<!-- 3.按钮图标 el-button-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary"  round  disabled>主要按钮</el-button>
      <el-button type="success" circle></el-button>
      <el-button type="info"  round icon="el-icon-message" >信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger"  round icon="el-icon-star-off">危险按钮</el-button>
      <el-button type="text">文字按钮</el-button>
    </el-row></br>

4.输入框  必须设置v-model属性才能实现输入效果-+

<!-- 4.输入框 el-input -->
    <el-input placeholder="请输入内容" v-model="msg" clearable></el-input>
     <el-input placeholder="请输入内容" v-model="msg" :disabled="true"></el-input>
    <el-input placeholder="请输入内容" v-model="msg" clearable show-password></el-input>

5.表格

<!-- 5.表格 标签  内容需要在data里准备数组  label为表格每一列命名 -->
    <el-table :data="arr">
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="品牌" prop="brand"></el-table-column>
    <el-table-column label="描述" prop="desc"></el-table-column>
    <el-table-column label="价格" prop="price"></el-table-column>
    <el-table-column label="更多" >
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-table-column>
    </el-table>

6.表单

<!-- 6.表单  -->
    <el-form>
      <el-form-item label="标题:">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
    <el-form-item label="卖点:">
    <el-input  v-model="form.sale"  placeholder="爆款热销"></el-input>
    </el-form-item>
    <el-form-item label="价格:">
    <el-input v-model="form.price" placeholder="999"></el-input>
    </el-form-item>
    <el-form-item label="详情:">
    <el-input  v-model="form.aaa" placeholder="我是详情"></el-input>
    </el-form-item>
<el-form-item >
   <el-button  v-on:click="save()" > 保存</el-button>
    </el-form-item>
     </el-form>