element-ui框架搭建

安装配置node.js

下载地址：http://nodejs.cn/download/

新建 node-global 、 node-cache 目录

D:\nodejs\node-global 和 D:\nodejs 加入系统环境变量

使用管理员进入操作命令

修改npm配置

npm config set prefix "D:\nodejs\node-global"
npm config set cache "D:\nodejs\node-cache"

安装 vue-cli脚手架

npm install vue-cli -g

新建一个newtest项目名目录

vue init webpack newtest

报错 vue : 无法加载文件 D:\nodejs\node-global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.
com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决方法： 把 D:\nodejs\node-global\vue.ps1 文件删了

cd newtest

安装element到项目中

npm i element-ui -S

编辑 src 目录 的main.js文件

// 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'

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',
  render: h => h(App),
  router,
  components: { App },
  template: '<App/>'
})

运行

npm run dev

打包 dist文件夹

npm run build

使用组件

https://element.eleme.io/#/zh-CN/component/radio
编辑【src】-【components】-【HelloWorld.vue】加入单选框

image.png
image.png

教程
https://element.eleme.io/#/zh-CN/component/installation