vue项目实践教程1:vux项目搭建和简介

vue作为比较受欢迎的前端开发框架之一,因为其优雅的代码结构,轻量化代码设计,简介易懂的API,灵活易用的指令和属性广受前端开发者的喜爱,其学习成本和学习难度相对react来说要简单很多。
这里,笔者以一个小项目为例,向大家介绍vue的使用和开发。
在了解本文章之前,你需要掌握css,html,javascript等前端基本技能,最好已经对vue有过简单的学习了解,你可以通过vue的官网或者菜鸟教程来进行vue的基础学习。
另外,本项目中用到了vux框架,vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面,页面设计灵活美观,很适合微信页面的相关开发设计。
首先,进行相关开发环境的配置。
1.安装vue
npm install vue
2.全局安装 vue-cli,
npm install vue-cli -g
3.使用 vue-cli 工具和 airyland/vux2 模板快速初始化项目,vux项目的初始化,读着可以查阅官方文档,这里笔者直接使用模板进行快速初始化设置。
vue init airyland/vux2 retailMall
4.进入项目目录,安装环境,运行项目。
cd projectPath
npm install
npm run dev
npm 的安装比较慢,读者可以设置淘宝镜像,加快安装速度。
设置淘宝镜像:
npm install -g cnpm –registry=https://registry.npm.taobao.org
完成之后,读着可以直接使用cnpm来代替npm,例如:cnpm install
项目运行起来后是这样的一个界面:
这里写图片描述

我们打开src/components目录,可以看到两个文件,HelloFromVux.vue和HelloWorld.vue两个文件,打开router目录下的index.js文件,可以看到,引用的文件正式HelloFromVux.vue文件,而页面上显示的也正是此文件中的内容。对于vue有基础的读者一眼就能看出来,我们这里搭建的vux项目和vue脚手架搭建的vue项目差别并不是特别大。
项目启动起来之后,我们就可以进行vue的项目开发,下一节我将会继续介绍vue 的项目开发,并且奉上项目地址。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值