vue和element-ui使用

参考:https://blog.csdn.net/davis2015csdn/article/details/72887591

上一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242

这一篇主要是创建一个vue项目并结合饿了么框架element-ui。

1.先创建vue项目,我准备把项目放在e盘下:E:\Work\RegisterProject;

vue和element-ui使用_第1张图片

命令行进入这个目录:

vue和element-ui使用_第2张图片

创建一个基于 webpack 模板的新项目

(1)vue init webpack register(项目名)

vue和element-ui使用_第3张图片

需要yes按Enter健就可以了,不需要输入n,然后按Enter健。

vue和element-ui使用_第4张图片

创建完成:在目录中可看到

vue和element-ui使用_第5张图片

运行:命令行进入到刚创建好的目录:cd register

vue和element-ui使用_第6张图片

运行:npm run dev

vue和element-ui使用_第7张图片

成功:vue和element-ui使用_第8张图片

在浏览器输入:http://localhost:8080/   我的是http://localhost:8081/(那是因为我已经打开另一个vue项目,80端口已经被占用,第一次的一般不会被占用,输入http://localhost:8080/ 就可以了)。

出现这个界面说明vue项目创建成功:

vue和element-ui使用_第9张图片

现在vue引入Element

1.打开cmd,进入到当前刚创建的vue项目目录

vue和element-ui使用_第10张图片


在当前目录中运行:npm i element-ui -S

vue和element-ui使用_第11张图片

我使用webstrom打开刚创建的项目;file-open

vue和element-ui使用_第12张图片

如图所示:

vue和element-ui使用_第13张图片

改变项目目录中的main.js文件;

初始main.js文件:

vue和element-ui使用_第14张图片

改成:
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)
如图所示:
vue和element-ui使用_第15张图片

3.然后在.vue文件里就直接可以用了

例如:在src/components/Hello.vue做一下修改

  1. <template>
  2. <div class="hello">
  3. <h1>{{ msg }} h1>
  4. <h2>Essential Links h2>
  5. <el-button>默认按钮 el-button>
  6. <el-button type="primary">主要按钮 el-button>
  7. <el-button type="text">文字按钮 el-button>
  8. div>
  9. template>
  10. <script>
  11. export default {
  12. name: 'hello',
  13. data () {
  14. return {
  15. msg: 'Welcome to Your Vue.js App'
  16. }
  17. }
  18. }
  19. script>
  20. <style scoped>
  21. h1, h2 {
  22. font-weight: normal;
  23. }
  24. ul {
  25. list-style-type: none;
  26. padding: 0;
  27. }
  28. li {
  29. display: inline-block;
  30. margin: 0 10px;
  31. }
  32. a {
  33. color: #42b983;
  34. }
  35. style>

运行:npm run dev(webstrom可以按Alt+F12键,输入npm run dev)

你将看到如下页面:

vue和element-ui使用_第16张图片

成功的引入了Element!!

你可能感兴趣的:(vue)