vue 环境安装
1 安装node.js 环境 , 下载 地址 https://nodejs.org/en/download/
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带上端口号就可以跑起来了。
更多推荐
所有评论(0)