vue自学笔记

第一部分：vue的安装

方法1：直接下载进行独立安装

从vue官网上直接下载 vue.min.js 并用 script 标签引入。

方法2：使用CDN安装

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
CDN的关键技术主要有内容存储和分发技术。即不需要下载下来自己通过在script标签中引用具体的CDN地址即可。

以下是几个推荐的CDN地址：
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg（推荐）：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

方法3：使用npm安装（在用 Vue.js 构建大型应用时推荐使用 NPM 安装）

一、全局配置

1. 到官网下载安装并配置node,js环境

2. 使用淘宝 NPM 镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装 cnpm

$ npm install cnpm -g

4. 安装vue

$ cnpm install vue

5. 安装webpack

npm install webpack -g

6. 全局安装 vue-cli

$ cnpm install --global vue-cli

7. 检测环境是否配好

node -v
npm -v
cnpm -v
Vue -V
webpack -v

输出均为版本号则配置完成

二、创建一个基于 webpack 模板的新项目

进入到项目文件夹的上层目录中。（就是你希望你的项目问价创建在哪里就进入到哪里。项目文件夹不需要自己创建）
输入下方命令行创建一个基于 webpack 模板的新项目（这里my-project是自己起的项目文件名称，命令会自动给你建一个项目文件夹）

$ vue init webpack my-project

并在接下来进行一些相应配置：

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev

三、项目开启

1. 进入到项目目录

cd my-project(自己建立的工程名字)

2. 安装项目依赖：

cnpm install

3. 启动项目

npm run dev

4. 查看结果
   如果出现下图，则安装成功
   

浏览器输入下面的端口，则会默认出现一个vue的欢迎页