vue+element-ui初学

1、安装 node 软件
2、查看安装版本：npm -v
3、配置淘宝镜像： npm install -g cnpm --registry=http://registry.npm.taobao.org
4、安装vue-cli， 命令：cnpm install -g vue-cli 按提示操作，可以直接按确认
5、(这一步我不记得我执行过^_）然后安装webpack; 命令：npm install -g webpack;

6.开始自动化构建vue项目，命令：vue init webpack projectName(自定义的项目名称）；

? Generate project in current directory? Yes
? Project name element-demo-02
? Project description A Vue.js project
? Author meigkun <meigkun@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "element".

最后出现：

# Project initialization finished!
# ========================

To get started:

  cd element-demo
  npm run dev

可以运行命令，浏览器访问

 DONE  Compiled successfully in 1876ms                                                                 
 I  Your application is running here: http://localhost:8081

5、进入都到项目目录，执行命令安装element-ui：npm i element-ui -S
6、安装成功之后，进入项目src目录在main.js中添加（element官网有快速上手）：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI)

7、在App.vue文件中添加element-ui组件：

<template>
  <div id="app">
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
  </div>
</template>

8、在运行项目就可以正常显示了，按钮如图。

1608106935(1).png