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>