vue使用element-ui

1. 安装node.js ,输入node -v 和 npm -v 分别查看版本号,验证是否成功

2. 安装淘宝镜像 ,也可不用, 只是加快资源下载

 npm install -g cnpm --registry=http://registry.npm.taobao.org
 或
 npm config set registry https://registry.npm.taobao.org 

3. 安装脚手架, 输入vue -V(大写) 和 webpack -v 就可以查看是否安装成功

npm install -g vue-cli        //全局安装vue脚手架
npm install -g webpack           //全局安装webpack
npm install -g webpack-dev-server   //安装webpack环境

4. 初始化vue项目

vue init webpack vueDome

5. 安装依赖

npm install   

6. 启动项目

npm run dev 

7. 安装工具

npm i vue-resource vue-router vuex axios --save  

8. 安装element-ui

npm i element-ui -S

9. main.js中引入 ,添加

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

10 .组件使用

<template>
   <div class="hello">  
    <h2>Essential Links</h2>  
    <el-button>默认按钮</el-button>  
    <el-button type="primary">主要按钮</el-button>  
    <el-button type="text">文字按钮</el-button>  
  </div>
</template>

11. 效果

12. vue3.0

12.1 创建helloweb文件件 cd /helloweb
12.2 基于node初始化vue3.0项目

npm init @vitejs/app helloweb --template vue

12.3 安装依赖 及运行项目

npm install  
npm run dev