Vue之单文件组件和脚手架

最新推荐文章于 2022-12-18 15:19:59 发布

原创最新推荐文章于 2022-12-18 15:19:59 发布 · 686 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

简介

主要介绍单文件组件的定义和编写方法和脚手架相关知识介绍。

单文件组件的定义是一个文件只有一个组件，使用xxx.vue文件，这个文件是vue团队定义的一种文件类型。

xxx.vue文件里面可以使用三个标签：

<template></template> 标签，是用于编写结构代码的，html代码。
<script></script>标签，是用于编写交互代码的，也就是js。
<style></style>标签，是用于编写样式代码的，也就是css。

之前提到组件的定义是代码和资源的集合，这里就得到了充分的体现了。

下面使用一个例子，编写一个school和一个student组件。

school组件代码：

<template>
    <!-- 编写组件结构代码，也就是html代码 -->
    <!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->
    <div class="orange">
        <div>学校：{{schoolName}}</div>
        <div>地址：{{schoolAddress}}</div>
    </div>
</template>

<script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {
    data() {
        return {
        schoolName:"尚硅谷",
        schoolAddress:"北京"
        }
    },
}
</script>

<style>
    /* 编写样式的地方 */
    .orange{
        background-color: orange;
    }
</style>

student组件代码：

<template>
    <!-- 编写组件结构代码，也就是html代码 -->
    <!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->
    <div class="orange">
        <div>学生姓名：{{studentName}}</div>
        <div>年龄：{{studentAge}}</div>
    </div>
</template>

<script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {
    data() {
        return {
        studentName:"张三",
        studentAge:18
        }
    },
}
</script>

<style>
    /* 编写样式的地方 */
    .orange{
        background-color: orange;
    }
</style>

//然后通常需要一个汇总组件，也就是一个组件来讲专门汇总这两个组件来形成一个最终的组件来使用，通常叫app.vue。

<template>
    <!-- 编写结构 -->
    <div>
        <school></school>
    <hr>
    <student></student>
    </div>
</template>

<script>
//引入school组件和student组件,涉及es模块化的语法
import school from "./School.vue"
import student from "./Student.vue"

export default {


    components:{
        //注册组件
        school,
        student
    }
}
</script>

<style>

</style>

组件的使用，是依赖在vue实例的情况下，所以通常需要一个js文件，我们称为入口文件，vue中通常定义该文件为main.js。

//引入app组件
import app from "./app.vue"


//创建vue实例，并注册app组件
new Vue({
    el:"#root",
    //编写模板，通常就<app></app>,这样的话，html文件就不用编写内容了，一个空容器就行了
    template:`<app></app>`,
    components:{
        app
    }
})

最后，需要一个html文件，提供一个供vue实例管理的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单文件组件</title>
</head>
<body>
    <div id="root">

    </div>
    <script src="./js/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>

至此，一个单文件组件的使用流程就完成，不过直接启动会报错，因为无论是浏览器还是es6语法，都无法识别vue文件，通常通过webpack或者vue官方提供的脚手架进行编译打包后才能使用，下面讲解使用脚手架的方式。

在这里插入图片描述

Vue脚手架

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。
一般脚手架使用最新的版本就行，向下兼容的。

使用脚手架：
使用脚手架的前提是目前系统有npm和node开发环境。

全局安装脚手架平台：
命令： npm intsall -g @vue/cli

安装完后，在关闭命令行再重新打开，在命令行输入vue命令，不报错，说明就安装成功了。
在这里插入图片描述
2. 切换到脚手架要保存的目录中，使用命令：
vue create xxx
xxx是脚手架名称，也就是一个文件夹名称。

输入命令按下回车后，会弹出一个选择框。

我们选择vue2版本后按下回车后，就开始帮我们创建脚手架了，脚手架是一个项目，vue初始化时为我们提供了一个helloword的基本代码。

在这里插入图片描述
第三步：进入创建的文件夹，使用如下命令启动项目：
npm run serve

分析脚手架最开始的时候的文件：
在这里插入图片描述
src文件夹：
首先我们看src文件夹下的main.js文件，该文件是脚手架启动的入口文件。

下一步：由于main.js里面引入了app组件，所以我们第二步是查看app组件，也就是src文件夹下的App.vue文件。

<template>
  <!-- 编写html结构 -->
  <div id="app">
    <!-- 这里引入了./assets/logo.png图片，这里说一下，src/assets文件夹在前端中通常是存放静态资源的 -->
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 使用helloword组件标签 -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
//引入helloword组件
import HelloWorld from './components/HelloWorld.vue'

//暴露当前app组件，在app组件中注册HelloWorld
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
/* 编写样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在App组件中引入了helloword组件，所以下一步我们看Helloword组件，也就是HelloWord.vue文件，从引入语法来看，该文件在src/components文件夹下。

总的来说：
在这里插入图片描述

//将上面编写的单文件组件案例使用脚手架进行启动：

删除原有的App.vue和HelloWord.vue组件。
把School.vue和Student.vue复制到components文件夹下。
将App.vue复制到src文件夹下。
修改App.vue中引入school组件和student组件的方式。

效果：成功。

很好奇的是html文件在哪，实际上html文件在public文件夹下。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面。 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端理想窗口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 引入页签 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- //这个标签是，当浏览器不支持JavaScript语法的时候就渲染里面的内容，现实中几乎不存在这种情况。 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- //容器结构 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>