cgb2106-day11

一,Vue腳手架

–1,執行以下命令安裝并檢驗

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

–2,創建Vue專案的程序

1,指定workspace: 最好別放c盤
2,在這個workspace指定的位置: 執行cmd 回車,執行了命令
3,初始化了一個vue專案: vue init webpack 專案名稱,回車,正確的選擇yes/no
4,此時需要一定的時間去下載vue的專案結構

二,自定義組件

–1,創建Car.vue檔案(在src/components里)

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

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

<style>
</style>

–2,修改App.vue檔案,注冊自定義組件

<template>
  <div id="app">
    <img src="./assets/logo.png">

   <!-- 3,使用自定義組件,本質上就是一個標簽 -->
   <Car></Car>

  </div>
</template>

<script>
// 1,匯入自定義組件
import Car from './components/Car.vue'
export default {
  name: 'App',
  //2, 添加指定的組件
  components:{
    Car
  }
}
</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>

–3,測驗

啟動服務器: npm run dev
打開瀏覽器訪問:http://localhost:8080

三,ElementUI

-1,安裝

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用，

npm i element-ui -S

-2,修改main.js,引入ElementUI

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

/* 為了優化網頁的顏值,使用了ElementUI,參考官網*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

-3,測驗,修改Car.vue檔案

<template>
  <h1>
    {{msg}}
    <!-- 1.圖示的效果-->
     <i class="el-icon-delete-solid"></i>
     <i class="el-icon-phone-outline"></i>
     <i class="el-icon-phone-outline"></i>

    <!--
        2.layout柵欄的效果
        el-row是一行,一行默認是24列,el-col是一列,:span可以自定義合并的列數
    -->
    <el-row>
      <el-col :span="24">hello</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>
   <!--
        3.el-button按鈕的效果
         type可以修飾按鈕的顏色,icon按鈕也可以加圖片,circle是一個圓形
   -->
    <el-button type="primary">按鈕1</el-button>
    <el-button icon="el-icon-share" circle type="warning"></el-button>

    <!--
        4.el-input輸入框的效果
        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>
    <!--
        5.el-table表格的效果
        el-table-column 表格里的列,label是列名
        想要給表格準備資料,資料必須放data里
        :data是要獲取啥資料 ,prop是要獲取哪個屬性的值
        stripe實作斑馬紋的表格
    -->
    <el-table :data="arr" stripe>
      <el-table-column label="編號" prop="id"></el-table-column>
      <el-table-column label="品牌" prop="pinpai"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
    </el-table>

  </h1>
   <!-- <i class="el-icon-edit"></i>  只能有一個根元素-->
</template>

<script>
  /* 支持匯出的自定義組件*/
  export default{
    name : 'Car',
    data(){
      return{
        msg : "hello componets~~",
        // 給表格準備多個資料
        arr : [
          {
            id : '001',
            pinpai : '蜜雪冰城',
            desc : '你愛我我愛你蜜雪冰城甜蜜蜜'
          },
          {
            id : '002',
            pinpai : '鴻星爾克',
            desc : 'to be no.1'
          }
        ]
      }
    }
  }
</script>

<style>
</style>

-4,測驗

四,Maven

–1,創建maven工程

1,File-New-Project-選中Maven-next-輸入工程名和GroupId-Finish
2,打開pom.xml檔案,添加jar包的位置,交給Maven下載

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>cn.tedu</groupId>
    <artifactId>cgb2106maven01</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!--  添加mysql依賴，可以支持多個依賴，依賴以坐標體現 -->
    <dependencies>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <!--要和資料庫版本匹配,
            資料庫是5.X的版本就添加5.X的依賴
            資料庫是8.X的版本就添加8.X的依賴
            -->
            <version>5.1.48</version>
        </dependency>
    </dependencies>

</project>

3,必須重繪,否則不下載