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脚手架构建工具(必须在全局中进行安装)
-
在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
-
是否安装成功:vue -V
2.3 切换国内镜像源
-
使用cnpm
- 由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.
- 在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org
-
将npm切换为淘宝镜像源
npm set registry https://registry.npm.taobao.org 指定源 npm config list 查看npm信息 npm install npm -g 升级npm
-
如果出现任何关于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 # 两个命令任意一个即可,启动项目