快捷搜索: 长连接 前端 源码 pan

vue和element-ui使用

参考:https://blog..net/davis2015/article/details/72887591

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

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

命令行进入这个目录:

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

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

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

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

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

运行:npm run dev

成功:

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

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

现在vue引入Element

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

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

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

如图所示:

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

初始main.js文件:

改成:
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)
如图所示:

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. <!-- Add "scoped" attribute to limit CSS to this component only -->
  21. <style scoped>
  22. h1, h2 {
  23. font-weight: normal;
  24. }
  25. ul {
  26. list-style-type: none;
  27. padding: 0;
  28. }
  29. li {
  30. display: inline-block;
  31. margin: 0 10px;
  32. }
  33. a {
  34. color: #42b983;
  35. }
  36. </style>

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

你将看到如下页面:

成功的引入了Element!!

经验分享 程序员 微信小程序 职场和发展