Vue CLI 【脚手架】

一、下载和安装

• 搭建Vue脚手架工程，需要使用到NPM（node package manaher）,npm是随nodejs安装的一款包管理工具，类似Maven。所以我么需要先安装Node

• 为了更好兼容，安装node.js10.16.3

• Vue Cli网址：https://cli.vuejs.org/zh/guide/installation.html

• 下载node.js10.16.3 地址:https://nodejs.org/

  • 找其他版本

    

    

• 安装目录自己定义

• 验证是否安装成功使用【node -v】指令

• 先删除以前的cli版本<不论之前有没有下载>

  • 指令：npm uninstall vue-cli -g

• 安装淘宝镜像 cnpm

  • 指令： npm config set registry https://registry.npmmirror.com

  • 如果遇到下载了不能使用，报错说执行策略，请使用PowerShell以管理员身份运行，然后输入

    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned指令

  • npm和cnpm区别

    • 两者之间只是node中包管理器的不同，都可以使用
    • npm是node官方的包管理器。cnpm是个中国版本的npm，是淘宝定制的cnpm（gzip压缩支持）命令行工具代替默认的npm
    • 如果因为网络原因无法下载使用npm下载，那cnpm就可以派上用场
    • npm和cnpm只是下载的地址不同，npm在国外下载东西，cnpm在国内下载东西

• 安装webpack和webpack-cli，指令： npm install webpack webpack-cli --save-dev，webpack是一打包工具

• 安装vue/cli，指令：npm install -g @vue/cli

• 输入vue -V 指令确认是否安装成功

• 创建一个目录，在导航地址输入cmd

• 输入创建项目的指令：vue init webpack 项目名称

  • 如果显示这个

    

  • 再输入npm install -g @vue/cli-init 下载init

• 然后切换到创建的项目中，然后输入指令： npm run dev

  • 成功后会看到这个页面

    

• 这个端口默认是8080，如果出现冲突则会默认修改端口【一般不会出现】

• 输入ctrl+c 结束运行

二、在ideal中运行

1.在ideal中运行

• 可以将文件直接拖拽进ideal

• 也可以使用ideal打开目录

  • 步骤如下

    

    

    

    

• 然后再配置npm

  

2.项目结构解析

三、ElementUI

1.基本介绍

• ElementUI官网：https://element.eleme.cn/#/zh-CN
• Element-plus网址：https://element-plus.org/zh-CN/component/overview.html

2.安装和使用

• 安装指令：npm i element-ui@版本号

• 完整引入

  

• 需要这三条指令

  // 引入Element组件
  import ElementUI from 'element-ui'
  // 引入CSS
  import 'element-ui/lib/theme-chalk/index.css';
  // 使用Element组件
  Vue.use(ElementUI);
  

• 使用

  <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 弄'
        }]
      }
    }
  }
  </script>
  
  <template>
    <div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%;color: red;">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <style scoped>
    div{
      width: 900px;
      margin: 0 auto;
    }
  </style>
  <script>
    export default {
      data() {
        return {
          data: [{
            label: '电脑/办公',
            children: [{
              label: '笔记本',
              children: [{
                label: '联想笔记本'
              }]
            }]
          }, {
            label: '一级 2',
            children: [{
              label: '二级 2-1',
              children: [{
                label: '三级 2-1-1'
              }]
            }, {
              label: '二级 2-2',
              children: [{
                label: '三级 2-2-1'
              }]
            }]
          }, {
            label: '一级 3',
            children: [{
              label: '二级 3-1',
              children: [{
                label: '三级 3-1-1'
              }]
            }, {
              label: '二级 3-2',
              children: [{
                label: '三级 3-2-1'
              }]
            }]
          }],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        };
      },
      methods: {
        handleNodeClick(data) {
          console.log(data);
        }
      }
    };
    </script>
    <template>
      <div>
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
    </template>
    <style scoped>
      </style>