Windows上使用VUX2简单教学

目录

介绍

先决条件

创建项目

介绍

现在前端开发的技术更新还是比较快的，所有对一些新技术还是有必要进行一些了解的，今天想说的基于vue.js开发的一个应用于移动端的UI库，是的，官方给出说法是库而不是一个框架。其官网地址(教程)：https://doc.vux.li/zh-CN/

先决条件

1、安装Node

下载地址：https://nodejs.org/en/download/

检查安装版本：

node -v

2、安装npm 

安装node的同时会自动会安装npm，可以检查其安装的版本

npm -version

由于npm的镜像一般都是国外的，所以可以考虑安装淘宝镜像，这样下载包速度会快点（当然这个不是必须的）

npm install -g cnpm --registry=https://registry.npm.taobao.org

检查版本：

cnpm -v

3、安装Webpack

npm install webpack -g

4、安装vux

npm install vux –save

可检查其版本

vue -V

5、安装vux-cli

npm install vue-cli -g

6、安装vux-loader（必须安装）

npm install vux-loader --save-dev

7、安装vuex

状态管理模式：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。详细内容可参考：https://vuex.vuejs.org/zh/

npm install vuex --save

8、安装vue-router（路由肯定会用到）

详细介绍可参考：https://router.vuejs.org/zh/ 

npm install vue-router vue-resource –save

9、安装less-loader

这个是用以正确编译less源码，否则会出现 ' Cannot GET / '

npm install less less-loader --save-dev

10、安装yaml-loader 

以正确进行语言文件读取

npm install yaml-loader --save-dev

上面这些基本可以开始项目的创建，然后编译也不会有什么问题。如果需要如多语言等，需要额外安装对应的插件，这需要看项目要做到什么程度再决定安装那些插件了。这里不再多做介绍了。

创建项目

创建项目的命令

vue init airyland/vux2 projectPath

注：其中的projectPath是表示具体项目的保存路径，如：d:\mytest。具体可参考https://doc.vux.li/zh-CN/install/biolerplate.html

在创建过程中，项目名称需要填写，描述和作者等根据实际情况填写，选择项可以考虑使用默认（即直接回车即可。切记：ESLint选项不要选择yes，一定要选择no，除非你能保证你写代码的时候严格符合ESLint的格式，否则编译一直报错的）

具体可参考下图

如上图所示，进入创建的项目中，执行npm install  安装需要的包（需要一些时间），然后运行 npm run dev ；等待一会即可。

出现如下所示即表示运行完毕

 

首次打开显示如下（在浏览器中输入上图所示网址：http://localhost:8080）

 

我们做一些修改，其实默认components文件下有两个文件，现在只显示了一个。所有我们看看怎么显示第二个页面。

1、首先打开main.js文件，在头部导入新页面，其次在路由中加入路由定义，如下所示

2、其次我们打开当前显示的HelloFromVux.vux文件，只需要在cell中加入属性link='/Detail'即可。

保存所有修改的文件，在界面上点击看看吧（下面是隐藏的界面，现在可以通过点击第一个界面中的cell打开了）