SFC&vue-cli

SFC

• 在之前 Vue组件 的文章里面，我们写的组件都是用 template 的形式去书写html，其实我们就是单纯的在写字符串，没有任何的高亮提示，也容易出错，而全部的html、js堆积在一起也使我们在阅读的时候觉得恶心
• Vue 官方为了解决这个问题，出了一个 SFC 规范，也就是 .vue 为后缀的文件，下面让我们看看

<template>
	<!-- html -->
	<div></div>
</template>

<script>
	// js 逻辑
	export default {};
</script>

<style scoped>
	/* css 样式 */
</style>

vue-cli

• SFC 规范提供的 .vue 文件确实让我们有更清晰的阅读，但是 html 文件可以直接在浏览器运行，我们又如何运行 .vue 文件呢
• webpack 是现在前端比较完善的模块化开发工具，它可以引入不同的文件进行解析，输出为浏览器可读的形式，我们运行 .vue 就要通过 webpack 去解析
• 但是我们要运行 .vue 文件，就需要搭建一个 webpack 环境，进行一大堆配置，这个过程也未免太过于复杂了，所以 Vue 官方，也出了一个脚手架 vue-cli ，它可以快速的帮助我们搭建一个 Vue 需要的 webpack 环境
• 下面让我们快速上手

全局安装 vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

• 安装成功后在命令行输入 vue 会显示 Vue-cli 的提示，你可以通过这种方式看看 vue-cli 是否安装成功
• 这里的提示，也可以说是文档，可以让我们快速的了解怎么使用 vue-cli ，有看文档的能力才是最重要的

单文件

• 如果我们需要直接运行 .vue 文件还需要安装一个全局依赖

npm install -g @vue/cli-service-global
# OR
yarn global add @vue/cli-service-global

• 安装完成后我们可以进到 .vue 文件目录，运行 vue serve componentName ，cli 会自动帮你编译，启用一个服务，让你能看到这个组件

vue serve App.vue

• 也可以通过 vue build componentName 构建单文件=>生产方式

vue build App.vue

项目

• 我们通常情况下会直接创建一个 Vue项目，而不是一个组件一个组件的开发，直接创建一个项目会有更多的选项，也更加的方便，我们需要到的 Babel ESLint Router Vuex` 都可以在这里直接安装，可以说是非常的方便了
• 注意 projectName 全小写
• 通过 vue create projectName 创建 Vue项目

vue create project

• 这里选项通过 ↑↓ 移动，回车确定，这里我们按项目需求安装，在项目后期阶段我们或许会使用初始化阶段未安装的东西，莫慌，可以到时再安装
• 新手可直接选 默认
• 这里我们选择 自定义配置

• 这里选项通过 ↑↓ 移动，空格选中，回车确定

• 版本

• 选择校验模式

1. 只进行报错提醒
2. 不严谨模式
3. 正常模式
4. 严格模式

• 选择校验时机

1. 保存时检测
2. 修复和提交时检测

• ESLint Babel配置是否放在同一个文件，这里建议大家分开放，选择第一个

• 是否保存我们之前的选项，我们不保存

等待一下，我们的项目就创建成功了

进入项目目录后，我们可以通过 npm run serve 启动项目

npm run serve
# OR
yarn serve

这就是我们第一个 Vue 项目