Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

    首先vue.js的作者是中国人,所以说他是国产的,吸收了google的angular.js和facebook的react.js的特性,摒弃了jquery传统的DOM操作,采用数据绑定和指令等概念,可以说是未来WEB端开发的趋势,但是也并不代表jquey就淘汰了,存在即合理,jq应该在以后会有其他领域的价值,这里我就不多说了。

    说了这么多,我们还是开始怎么搭建vue.js的环境吧。首先要搭建vue的环境需要借助node.js的npm的包管理器。这个npm我就不详细介绍了,网上自己去百度,反正后面要安装的一系列的依赖或者包都要用到这个。

即使你不使用vux的代码, 但能从源码得到一些参考那么也是件让人高兴的事情。


基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。

vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。

vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用实用美观的移动端UI组件库,现在离理想状态还有不少距离,因此需要大家及时反馈问题及贡献代码。




一   (nodejs 中文社区 http://cnodejs.org/)

 安装node.js 环境 , 下载 地址 

https://nodejs.org/en/download/

选择对应的版本下载安装 ,  Windows Installer (.msi)  32bit   搂主安转的。

 安装完成后 , 在 cmd 命令行中输入 node -v 查看版本号 , 输入npm -v 可以看到 安装的路径 还有版本号。

node.js的环境变量的新建。

    其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。

    1、启动CMD依次执行以下两条命令
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
有可能权限不够 试试使用以管理员身份运行 cmd
2、设置环境变量:
NODE_PATH = C:\Program Files\nodejs
PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

这样就可以把后面全局安装的装到global里并且可以直接用命令使用。


二    cnpm的安装

安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度是超级慢啊。所以我们要安装cnpm,cnpm是淘宝对npm的镜像服务器,这样依赖的包安装起来就快多了。
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org

有可能权限不够 试试使用以管理员身份运行 cmd


三  

   安装全局  webpack+vue-loader+vux     vue-cli 工具

    命令输入

npm install -g  vux --save 安装或者更新  vue

  1.(npm)cnpm install -g vue-cli                       //全局安装vue-cli

安装 webpack

        2.(npm)cnpm install -g webpack                          //全局安装webpack

当然如果常规项目还是把依赖写入 package.json 包去更人性化:

     cnpm init

  cnpm  npm install webpack --save-dev  

 3 (npm)npm install -g webpack-dev-server             //安装webpack的本地webserver    为了热替换


没有安装 vue-loader之后再创建vue 的项目是 会选择是否使用 初始化 vue-loader 和一系列的项目 使用的参数。如图



 
 
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目 这个是使用 vue-cli 工具和 airyland/vux2 模板快速初始化项目,默认为 webpack2 模板
$ vue init webpack my-project  ( vue init airyland/vux2 projectPath    
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev 启动项目
项目成功 


         


查看项目结构




运行别人的vue.js项目domo

可以从github上克隆下来,然后将项目文件夹放到某个盘符下,然后cmd命令 找到该盘符,比如 f:

f:\cd domo_vue

命令 cnpm(npm) install    //在本地安装

最后  cnpm(npm) run dev   回车   //在本地的浏览器打开127.0.0.1带上端口号就可以跑起来了。

 


Logo

前往低代码交流专区

更多推荐