【web前端】【Vue】进阶：单文件组件、vue-cli、多个单文件组件

1.单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html

• 普通方法：我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

• 优点：中小规模的项目中运作好，在这些项目里 JavaScript 只被用来加强特定的视图。

• 缺点：在复杂的项目中，或前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

  1. 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
  2. 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到**丑陋的 **
  3. 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
  4. 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

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

  • 完整语法高亮
  • CommonJS 模块
  • 组件作用域的 CSS

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

* 可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS
* 或者其他任何能够帮助你提高生产力的预处理器。
* 如果搭配 vue-loader 使用 webpack，它也能为 CSS Modules 提供头等支持。

如果不用单文件组件， 也可以内联JS和CSS，例如:

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

【注意】浏览器怎么识别vue文件？
——使用webpack等工具，进行转换
——利用脚手架工具进行一系列配置，包括webpack，翻译vue文件成html文件

脚手架CLI

介绍
安装文档

2.vue-cli3.0的使用

npm install -g @vue/cli (一次安装) node-sass需要单独处理

【脚手架创建项目】

• vue create myapp
• 可以默认配置，也可以手动选择配置：
  

【vue项目构成】

• 【项目入口页面】：public-index.html : 包含一个id为app的div
• 【入口模块】：main.js：实例化vue，挂载到盒子上
• 【根组件——App.vue】：

  1. <template> ‐html代码,最多可以包含一个
     

  2. <script> ‐js代码,最多可以包含一个
     

  3. <style>‐ css代码。可以包含多个，src的路径是相对的
     
     【tip】：style标签 加上scoped属性，css局部生效,不会造成样式冲突。
     原理：scoped属性为每个组件生成唯一标识的key
     【tip】：style标签 加上lang=“scss”，支持scss
     

【指令】

• npm run serve 开发