02.vue安装

1. vue核心概念

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

官方文档：http://vuejs.org/v2/guide/syntax.html

中文文档: https://cn.vuejs.org/v2/guide/syntax.html

2. vue.js安装

2.1 安装node.js环境（npm包管理工具）

从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了

安装完成之后，进入命令行窗口，输入node -v命令，查看node的版本

2.2 安装vue-cli脚手架构建工具（必须在全局中进行安装）

1. 在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

2. 是否安装成功：vue -V

2.3 切换国内镜像源

1. 使用cnpm

   • 由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.
   • 在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org

2. 将npm切换为淘宝镜像源

   npm set registry https://registry.npm.taobao.org
   指定源
   
   npm config list
   查看npm信息
   
   npm install npm -g
   升级npm
   

3. 如果出现任何关于node依赖的问题导致服务无法启动，执行npm install无法解决的，则安装rimraf,然后进入项目目录下，执行rimraf node_modules 删除后，重新执行 npm install 安装依赖

   删除node_modules
   
   npm install rimraf -g
   
   rimraf node_modules
   

2.4 创建vue项目

# 1. 初始化项目
vue init webpack vue01  # 在文件夹对应的cmd窗口使用， 输完回车

# 2. 接下来选择配置项目信息
? Project name (vue01)  #项目名称 默认回车即可
? Project description (A Vue.js project)  # 项目描述 默认回车即可
? Author   # 作者  默认回车即可

? Vue build (Use arrow keys)    # 打包项目选项 默认回车即可
? Install vue-router? (Y/n)   # 是否安装路由  输入y
? Use ESLint to lint your code? (Y/n)  # 是否使用eslint检测代码， 输入n
? Set up unit tests (Y/n)   # 是否使用测试单元    输入 n
? Setup e2e tests with Nightwatch?  #   输入n
? Should we run `npm install` for you after the project has been created? (recommended)
    ❯ Yes, use NPM  # 是否使用npm包管理工具
    Yes, use Yarn  # 是否使用yarn包管理工具
    No, I will handle that myself  # 不，我使用我自己的工具，想使用cnpm选第三个选项

# 3. 进入项目文件夹，在终端安装必备的包
cd vue01  # 首先进入项目文件夹
npm install  # 如果上面选的是第三个选项， 这一步是必须的，使用cnpm工具，安装一些必备的项目包, 
            # 如果上面选的是npm，这一步没必要，当然多运行一遍，也没问题

# 4. 在终端运行项目
npm run dev  # 两个命令任意一个即可，启动项目