这是我参与「第四届青训营」笔记创作活动的的第5天。

单组件的使用

使用Vue的单文件组件，首先需要从官网中下载nodejs。在使用，我们可以创建以下这下文件：

但是vue类型文件不支持直接在浏览器中渲染出来，因此需要借助Vue的脚手架，vue_cli。Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台），借助Vue 脚手架将页面渲染出来。

使用脚手架之前，需要从官网中下载nodejs。

nodejs安装完毕后，初始化Vue 脚手架，具体步骤如下：

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

在全局安装@vue/cli之前，建议先先配置npm的淘宝镜像，否则容易出现下载缓慢甚至突然暂停的情况。

npm config set registry https://registry.npm.taobao.org

此外，Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakcage配置，可以执行如下：

vue inspect > output.js

模板项目的结构

ref

props

props: ['name', 'age', 'setName']

props: { name: String,
age: Number,
setNmae:Function
}

props: { name: {type: String, required: true, default:xxx}, }