单文件组件

在很多Vue项目中，我们使用Vue.component来定义全局组件，然后用new Vue({el:'#app'})在页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，但是在一些复杂的项目中就会显现出它的缺点。

缺点：

全局定义组件时命名不能重复
字符串模板缺乏语法高亮
不支持css
没有构建步骤

文件扩展名为.vue的single-file components(单文件组件)为以上所有问题提供了解决办法，并且还可以使用webpack或Browserify等构建工具。

这是一个文件名为App.vue的简单实例：

<template>
  <div>
    <h3>{{msg}}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "vue-cli3开发单文件组件",
    };
  },
};
</script>

//scoped表示当前的样式只对当前的组件生效
<style scoped>
h3 {
  color: #ff6700;
}
</style>

Vue-CLI3脚手架

基本配置

安装node.js
- 推荐安装LTS版:长期支持版，稳定，nodejs.org/en/
- win+r打开cmd命令窗口，输入node -v查看版本，确认是否安装成功
安装淘宝镜像
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- 以后的npm可以用cnpm代替
安装Vue CLI3脚手架
- cnpm install -g @vue/cli
检查其版本是否正确
- vue --version或vue -V

在vscode终端中无法运行npm、vue等指令（踩坑）

解决：

在Windows应用中找到Windows PowerShell，以管理员身份运行。
在命令框输入

set-ExecutionPolicy RemoteSigned

然后输入A回车即可。

执行get-executionpolicy查看是否更改成功，为RemoteSigned表示成功

快速原型开发

使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：

cnpm install -g @vue/cli-service-global

vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

在App.vue文件所在目录下运行vue serve即可运行.vue文件。

首先在终端通过cd命令到App.vue文件所在的目录下，输入npm init进行初始化。
操作完第一步之后会有对package.json文件中的信息填写，项目名一定要填写且不要填写中文，其他选填即可。

package name: (vue单文件组件) single
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: Tom
license: (ISC)

输入vue serve运行即可。

使用Vue-CLI3生成项目

在终端输入vue create 项目名创建项目

如果是使用vscode第一次创建的话，可能会出现

?  Your connection to the default npm registry seems to be slow.      
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

“与默认npm注册表的连接似乎很慢。使用淘宝镜像安装更快”，同意，输入y回车即可

紧接着会出现

Vue CLI v4.4.6
? Please pick a preset: (Use arrow keys) //请选择预设：（使用箭头键）
> default (babel, eslint)	//默认值
  Manually select features	//手动选择功能

选择Manually select features

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: //检查项目所需的功能
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

保持默认，回车即可

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: (Use arrow keys)	//选择一个linter/formatter配置
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择ESLint with error prevention only仅具有错误预防功能的ESLint

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)	//选择其他lint功能
>(*) Lint on save	//保存时的Lint
 ( ) Lint and fix on commit (requires Git)

选择Lint on save

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

“您更喜欢将Babel、ESLint等的配置放在哪里。”

选择In dedicated config files在专用配置文件中

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

“是否将其保存为将来项目的预设？”，同意，输入y回车即可

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as:

给预设命名，随便输入命名即可

项目创建成功后会出现以下：

�  Successfully created project mysite.
�  Get started with the following commands:

 $ cd mysite
 $ npm run serve

首先通过cd到项目目录，然后通过npm run serve指令运行项目即可

项目文件介绍

.eslinttrc.js: eslint的配置，用来管理和检测js代码风格的工具，当有不符合配置文件内容的代码出现就会报错或者警告
.gitignore: git提交忽略的文件目录配置
.postcssrc.js ：处理css前缀问题
.babelrc：用来设置转码的规则和插件的
package-lock.json和package.json：包的管理的配置文件
public：外部静态资源，其中的index.html是整个项目的入口文件

主要关心src
src                                         # 存放项目源码
     — assets                               # 当前项目依赖，和public有所不同，放置一些图片,如logo等
     — components                      		# 目录里面存放一些公共组件
     — App.vue                            	# 根组件
     — main.js                              # 入口js文件

注意：node_modules中保存着项目依赖和开发依赖的文件，千万不要去修改和删除，如果不小心删除了，建议将整个文件夹全部删掉，再在当前目录下通过npm install指令重新进行下载。

10-Vue-CLI3的使用