vue2+elementUI HelloWorld

vue2+elementUI HelloWorld

前言

把自己一年前的项目拉下来发现。。。。emmm运行不了！原因是各种各样的东西升级了 npm install 都报404了！ 没法 只有研究一下vue2了，搜了半天发现。。。嗯没有自己想要的，我只是想要一个基础环境搭建好好不好？尼玛给我来各种概念介绍干嘛（超凶(●￣(ｴ)￣●)），嗯，好吧，我自己写一个吧。。。。照着走下去就能运行的。复制粘贴就行（防止自己又不知道怎么弄得）

环境

如图
基本是最新得把应该。。。。

搭建

环境没什么好说的
让我们开始吧

我们直接用webpack来建模板好了

npm init webpack 你的项目名字

这里他会问你要不要各种东西 如果你懂 你就要
你不懂 一律不要好吧 ！
刚开始我不知道 然后装了一个什么esline。。。。搞得我怀疑人生 最后重头开始

然后你有一个你的项目的文件夹
用你的ide打开好了 看你个人习惯
我这里嫌麻烦 直接用idea打开了
目录酱紫的

node_modules是你运行npm install后生成的文件夹

这个时候就搭建完了
你可以运行npm run dev然后访问localhost:8080
可以看到这个

好了开始导入elementUI

在你的项目目录下面运运行

npm install element-ui --save

这是下载包（后端这么叫，前端是不是这么叫？）
然后导包
找到你的项目main.js（src下面）
添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

和

Vue.use(ElementUI)

结果酱紫

// 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.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

使用

接下来就可以使用elementUI的组件了
你问我怎么用？

打开你的HelloWrold.vue

添加

    <div>
      <el-button>默认按钮</el-button>
      <el-button type="primary" @click="test">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>

这里的 <div> 要和<h1>同一级 你要是和之前那个<div>同一级会报错。。
修改一下<script>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    test(){
      this.msg = "hello wrold"
    }
  }
}
</script>

好了 运行 点击 主要按钮
结果

然后你就可以开始愉快的各种搭积木了！

总结

写这种总结真不容易 我向那些分享学习过程的前辈表示最高的敬意 谢谢你们的分享