cgb2106-day11

朱雀 2021-09-11 03:24 303阅读 0赞

### 文章目录 ###

*   *  一,Vue脚手架
     *   *  \--1,执行以下命令安装并检验
         *  \--2,创建Vue项目的过程
     *  二,自定义组件
     *   *  \--1,创建Car.vue文件(在src/components里)
         *  \--2,修改App.vue文件,注册自定义组件
         *  \--3,测试
     *  三,ElementUI
     *   *  \-1,安装
         *  \-2,修改main.js,引入ElementUI
         *  \-3,测试,修改Car.vue文件
         *  \-4,测试
     *  四,Maven
     *   *  \--1,创建maven工程

## 一,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的项目结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]

## 二,自定义组件 ##

### –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">
    
       
       <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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]

## 三,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}}
        
         <i class="el-icon-delete-solid"></i>
         <i class="el-icon-phone-outline"></i>
         <i class="el-icon-phone-outline"></i>
    
        
        <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>
       
        <el-button type="primary">按钮1</el-button>
        <el-button icon="el-icon-share" circle type="warning"></el-button>
    
        
        <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>
        
        <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>
       
    </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,测试 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]

## 四,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>
    
        
        <dependencies>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                
                <version>5.1.48</version>
            </dependency>
        </dependencies>
    
    </project>

3,必须刷新,否则不下载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]: /images/20210911/c69811f94e474ea9b1412f23e1704a35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]: /images/20210911/dcf431dce58e489c997c9e0cf8ac3f39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]: /images/20210911/c04c104d5bbc4d6c99590403dd2aeb0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]: /images/20210911/7749a2d4169f4484ad7a3aa03621fd20.png