Vue CLI

Review

组件：

is 属性的使用

Prop：

Prop 类型：

[] - 数组类型，如：

{ props: ['title', 'id', 'completed'] }

{} - 对象类型，如：

{ props: { title: String, id: Number, completed: Boolean } }

验证，如：

{ props: { title: { type: String, required: true }, id: Number, completed: { type: Boolean, default: false } } }

过渡 / 动画

animate.css

过滤器

Vue.filter(name, callback)

或

options = { filters: { name: callback() {} } }

Vue CLI

脚手架，方便进行项目结构搭建

使用

全局安装 @vue/cli $ npm i @vue/cli -g

安装完成后，可以使用 vue --version 查看版本信息，如果在命令行下能够看到版本信息，则说明安装成功。

创建项目 $ vue create 项目名称

此时，会展示一个向导步骤，根据步骤，选择每一步需要安装或保存的内容。步骤选择中可以使用上下键实现选择，如果 git-bash 中无法使用上下键选择，则需要修改相关 git 配置，该配置在 git 安装目录下：

<git安装目录>/etc/bash.bashrc

在该文件末尾添加一行以下内容：

alias vue='winpty vue.cmd'

然后重启 git-bash 即可，重新使用 vue create 来创建项目。

创建项目时会自动安装依赖，如果 node-sass 安装报错，可以切换 node-sass 源：

$ npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g 运行 $ npm run serve

在本地会创建一个服务器（webserver），该服务器实际上是 webpack-dev-server 插件，建议该服务器仅用于开发环境，该服务器在 8080 端口实现监听，在浏览器地址栏输入 http://localhost:8080 即可访问运行的项目资源。