vue.js

vue.js

---

1. 简介

vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

nodejs
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2. 安装-windows平台

vue.js常与node.js搭配使用

环境：win8 64位

2.1. node.js安装

下载地址：https://nodejs.org/zh-cn/download/
下载win64 msi 安装包
当前长期支持版: 14.15.0 (包含 npm 6.14.8)

安装完成
执行node -v 查看安装版本

2.2. npm安装

当前版本node.js已集成npm
命令行运行nmp -v 验证是否正常。

2.3. cnpm

安装完node之后，npm包含的很多依赖包是部署在国外的，会很慢。所以我们要安装cnpm，cnpm是淘宝对npm的镜像服务器，这样依赖的包安装起来就快多了。
安装命令为：
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.4. vue-cli

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。
该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
安装命令：
cnpm install -g vue-cli

如果安装成功，但使用cnpm却找不到命令，那么就是环境变量问题，path添加node的安装路径即可，例如";C:\Program Files\nodejs\node_modules"

安装完成验证
vue
vue -V

3. 基础使用

初始化vue项目
命令：
vue init webpack my-project
　　　　　　Project name 项目名
　　　　　　Project description 项目名描述
　　　　　　Author 作者邮箱
　　　　　　Use ESLint to lint your code? 是否需要ESlist语法检查
　　　　　　Setup unit tests with Karma + Mocha? 是否需要单元测试
　　　　　　Setup e2e tests with Nightwatch? Yes是否需要e2e测试

使用命令cnpm run dev启动项目，浏览器会打开 http://localhost:8080/#/ 看到以下效果

编译打包 cnpm run build
会编译打包到项目dist文件夹下，然后我们就可以部署到服务器上（注意：如果你直接打开index.html，可能页面会是一片空白，这是由于你引用的js路径有问题）