【Vue学习篇:vuejs简介、环境安装以及项目部署】

9次阅读

共计 1389 个字符,预计需要花费 4 分钟才能阅读完成。

1、什么是 vuejsvue.js 是一套构建用户界面的渐进式框架。vue.js 是轻量级的,与其他重量级框架不同,它被设计为可以自底向上逐层应用。vue 的核心库只关注视图层,易于上手,另外 vue 完全有能力驱动采用单文件组件和 vue 生态系统支持的库开发的复杂单页应用。官方地址:https://cn.vuejs.org/ 官方介绍:https://cn.vuejs.org/v2/guide/
2、对比其他框架参考:https://cn.vuejs.org/v2/guide…
总的来说,vue.js 适合制作企业级的应用,性能方面要更轻量、运行速度更快,而且也更为灵活,而 vue 学习起来也要比学习其他的要快,能够更快掌握并投入开发
3、特性

轻量级的 mvvm 框架
双向数据绑定
组件通信
指令,条件渲染

4、安装部署
(1)整体所需要的工具:

node.js 环境(npm 包管理器)
vue-cli 脚手架构建工具
webpack 包管理工具
(cnpm npm 的淘宝镜像可选)

(2)安装 nodejs,因为创建 vue 项目的时候要搭配 webpack 项目构建工具,而 webpack 在打包压缩项目的时候依赖 node.js 环境。Windows 环境去官网下载 https://nodejs.org/en/download/Mac 环境下需要用终端先安装 brew,然后再用 brew install nodejs 来安装 node.js,执行以下命令可以安装 brew。
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

(3)安装 cnpm,国内的淘宝镜像服务器,如果使用 npm 直接安装项目依赖包的话,安装起来可能会很慢(解决 npm install 墙内速度慢的问题,安装完后 使用:下载命令用 cnpm 替换 npm)。在终端执行以下命令即可安装淘宝镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org

另外,Mac 环境下需要先获取 nodejs 模块安装目录访问权限,执行
sudo chmod -R 777 /usr/local/lib/node_modules/

(4)安装 webpack,执行:
cnpm install webpack -g
(5)安装 vue 脚手架,执行:
npm install vue-cli -g
(6)环境部署好之后,就是创建项目了:找一个合适的位置,在 cmd 里输入:vue init webpack vue_test(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作

(7)进入上面创建的项目里,然后再 cmd 里面运行
npm run dev
(可以先在启动之前执行 npm install 来安装项目依赖包,注意,最好执行 npm 而不要执行 cnpm,从国内镜像 cnpm 下载到的有缺少一部分依赖库)
就可以启动项目,窗口会提示你打开 http://localhost:8080/

在浏览器里面输入 http://localhost:8080/ 即可打开以下页面

则说明项目创建成功,可以直接在搭建起来的框架继续编写即可。
附注:我自己搭了一个 vue2.0+vue-router+webpack+mint-UI+Vuex 的整合框架,大家可做参考,代码放到了 github

正文完
 0