vue 单文件组件、vue-cli、多个单文件组件
1.单文件组件
https://cn.vuejs.org/v2/guide/single-file-components.html
-
普通方法:我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
-
优点:中小规模的项目中运作好,在这些项目里 JavaScript 只被用来加强特定的视图。
-
缺点:在复杂的项目中,或前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到**丑陋的 **
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
- 没有构建步骤 (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】:
-
<template>
‐html代码,最多可以包含一个
-
<script>
‐js代码,最多可以包含一个
-
<style>
‐ css代码。可以包含多个,src的路径是相对的
【tip】:style标签 加上scoped属性,css局部生效,不会造成样式冲突。
原理:scoped属性为每个组件生成唯一标识的key
【tip】:style标签 加上lang=“scss”,支持scss
-
【指令】
- npm run serve 开发