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 的项目开发，并且奉上项目地址。