本文共 1467 字,大约阅读时间需要 4 分钟。
目录
现在前端开发的技术更新还是比较快的,所有对一些新技术还是有必要进行一些了解的,今天想说的基于vue.js开发的一个应用于移动端的UI库,是的,官方给出说法是库而不是一个框架。其官网地址(教程):
1、安装Node
下载地址:
检查安装版本:
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
状态管理模式:它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。详细内容可参考:
npm install vuex --save
8、安装vue-router(路由肯定会用到)
详细介绍可参考:
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。具体可参考
在创建过程中,项目名称需要填写,描述和作者等根据实际情况填写,选择项可以考虑使用默认(即直接回车即可。切记:ESLint选项不要选择yes,一定要选择no,除非你能保证你写代码的时候严格符合ESLint的格式,否则编译一直报错的)
具体可参考下图
如上图所示,进入创建的项目中,执行npm install 安装需要的包(需要一些时间),然后运行 npm run dev ;等待一会即可。
出现如下所示即表示运行完毕
首次打开显示如下(在浏览器中输入上图所示网址:http://localhost:8080)
我们做一些修改,其实默认components文件下有两个文件,现在只显示了一个。所有我们看看怎么显示第二个页面。
1、首先打开main.js文件,在头部导入新页面,其次在路由中加入路由定义,如下所示
2、其次我们打开当前显示的HelloFromVux.vux文件,只需要在cell中加入属性link='/Detail'即可。
保存所有修改的文件,在界面上点击看看吧(下面是隐藏的界面,现在可以通过点击第一个界面中的cell打开了)
转载地址:http://bdzhj.baihongyu.com/