vue脚手架常用的规范介绍

以上是Vue脚手架的基本的目录结构，我们一般编写代码都放在src目录下，这里有一个components文件夹，该目录用于存在自定义组件。src目录小还有一个App.vue，该文件是项目展示的窗口文件。

接下来为大家介绍一下vue文件的结构，每个vue文件包含三个部分
1. HTML
2. CSS
3. JS

HTML部分的代码要包裹在<template></tempate>标签内。注意：如果<template></tempate>标签内包裹不止一个元素，我们要用一个<div></div>标签给包裹起来，否则会出现问题。

JS部分的代码要包裹在<script></script>标签内。在该标签内我们一般进行组件的属性和方法的的设置以及数据的传递等。

CSS部分的代码要包裹在 <style></style>标签内。注意：style内的样式是作用在全局的，如果我们只在该组件生效，我们应该在style标签中添加scoped。这样可以限定样式的作用域。即<style scoped></style>。

使用一个组件要有几步？

通过import 引入
在components中注册
通过注册的标签在template中使用。

这里我们需要注意的是组件的命名规则。由于vue组件在新版中是不区分大小写的，我们在引入组件的时候尽量使用驼峰命名法，在template标签引用的时候使用以-形式的拆分法引用组件。虽然直接用驼峰命名法引用组件也是行，但这不符合HTML标签的命名规则。

举个栗子：

    <template><div id="app"><my-component-name/></div></template><script>import myComponentName from './components/myComponent';export default {name: 'app',components: {myComponentName}}</script>

在script标签中，export default { }用来暴露组件，以便在使用的时候可以通过import 引入，这是ES6的写法。export default { }内的data并不是我们习以为常的对象，而是函数，该函数返回的才是我们的data对象，这样做是避免引用赋值。属性的接收是通过props接收，放在数组里，使用时把它当做data来使用；如果我们要对props接受并对传递过来的数值类型进行规定。我们可以以对象形式的进行接收，键名是传递过来的属性名，值是数据类型。

举个栗子：

    export default {props: ['name', 'content', 'age'],     // 数组形式，只能接收属性props: {'name': String,'content': String,'age': Number}}

vue脚手架常用的规范介绍相关推荐

Vue第三部分(1)：Vue脚手架构建过程详细介绍和案例
Vue-CLI 基本使用命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算 ...
VUE脚手架介绍及安装教程
目录一.vue 是单文件组件 1.1之前注册组件有什么缺点 ? 1.2什么是单文件组件 :后缀为 .vue 的文件二.脚手架简介 2.1 webpack 三.脚手架介绍 3.1.vue-cli简介 ...
Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
Vue 脚手架中的.eslintrc.js代码规范的解决
在我们使用Vue脚手架创建项目时尤其是团队共同开发项目时会按照一个共同的代码规范来编程创建Vue脚手架中有一个.eslintrc.js格式但是在编程中我们通常会使用 shift+alt+f ...
Vue脚手架安装常用命令
创建vue项目时文件夹内容要为空不然无法创建 cmd切换盘符:E:回车. 切换淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taob ...
vue脚手架和html,Vue脚手架及Vue-router基本使用_含真_前端开发者
首先在大前提cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化 ...
vue脚手架基本使用
首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启es ...
Vue 脚手架CLI 初始化项目
1 介绍 CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架. Vue CLI是一个官方发布vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及 ...
npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...

vue脚手架常用的规范介绍

使用一个组件要有几步？

vue脚手架常用的规范介绍相关推荐

最新文章

热门文章