当前位置:Gxlcms > JavaScript > 怎样实现Vue项目中使用Vux

怎样实现Vue项目中使用Vux

时间:2021-07-01 10:21:17 帮助过:9人阅读

这次给大家带来怎样实现Vue项目中使用Vux,Vue项目中使用Vux的注意事项有哪些,下面就是实战案例,一起来看一下。

默认已安装vue环境

1.安装vux

npm install vux --save-dev

2.安装vux-loader

  1. npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错

3.安装less-loader以正确编译less源码

  1. npm install less less-loader --save-dev

4.安装 yaml-loader 以正确进行语言文件读取

  1. npm install yaml-loader --save-dev

5.修改build/webpack.base.conf.js中的代码

将原文中的

修改成如下的

6.在安装完依赖和配置后文件以后,引入vux的模板,把之前的about.vue拿来修改,全部的代码如下

  1. <template>
  2. <p class="about">
  3. <a href="./index.html" rel="external nofollow" >从about跳转到demo1</a>
  4. <group>
  5. <cell title="title" value="value"></cell>
  6. </group>
  7. </p>
  8. </template>
  9. <script>
  10. import { Group, Cell } from 'vux'
  11. export default {
  12. components: {
  13. Group,
  14. Cell
  15. }
  16. }
  17. </script>
  18. <style>
  19. </style>

最后在运行 npm run dev,显示出的about.vue是这样的,代表已经引入vux成功,然后尽情的去使用vux的组件快速开发吧

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

怎样操作vue通过id从列表页跳转详情页

如何利用Vue中slot插槽分发父组件

以上就是怎样实现Vue项目中使用Vux的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行