Vue｜单文件组件与脚手架安装

爱被打了一巴掌 2023-10-12 15:44 270阅读 0赞

![968f4c3a9001403aaa609f4e85ac2933.gif][]

###  ###

*  一、单文件组件
 *   *  1.1 介绍
     *  1.2 文件组成
     *  1.3 加深认知
 *  二、脚手架安装
 *   *  2.1 什么是脚手架?
     *  2.2 使用镜像
     *  2.3 全局安装vue/cli
     *  2.4 创建并启动项目

# 一、单文件组件 #

## 1.1 介绍 ##

> \[.vue\]文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js。

![在这里插入图片描述][b28f580949e34d38bca276954e6215f3.png]

## 1.2 文件组成 ##

> .vue文件由三部分组成，其中template存放响应的html代码，style存放响应的css代码，script存放响应的js代码。

## 1.3 加深认知 ##

> 在上一小节非单文件组件中，我们是在.html中通过注册绑定的方式所实现。

![在这里插入图片描述][c4afdc8bb7064239a5d2c1b0d4454709.png]

> 现在换成单文件组件之后就不能再用之前的思路来开发了，要把不同的组件独立出来变成\[.vue\]后缀的文件；新建目录后再创建一个PageHeader.vue的文件。

![在这里插入图片描述][30fc3ed638ba4fe7a3350f094fed5aef.png]

> 可以尝试在这个.vue的文件中直接输入html标签，并没有任何语法高亮效果，因为在.vue文件中只能有效识别上述文件组成的三个标签

![在这里插入图片描述][e221c9391b1241bc877d43b08d7bebf1.png]

> 这里可以装一个插件以实现语法高亮的效果，在拓展中搜索Vetur，找到作者是Pine Wu的插件并安装。

![在这里插入图片描述][e9c83655692f4ceaae0b2c9cfe2c7e5d.png]

> 如果使用浅色主题可能效果不是很明显，可以通过快捷键换肤后再进行查看；先ctrl+k再ctrl+t

![在这里插入图片描述][e2f948bb83304e01a64a7c0161123c16.png]

> 将PageHeader.vue各个区域的内容进行填充

![在这里插入图片描述][9a58b972c2684a0dad0e887a859de801.png]

<template>
        
        <div class="header">
            <h1>{
       {header}}</h1>
            <button @click="showHeader">点击弹出头部标题</button>
        </div>
    </template>
    
    <script>
        // 组件的交互代码
        export default {
            name:'PageHeader',
            data(){
                return{
                    header:'这是页面头部'
                }
            },
            methods:{
                showHeader(){
                    alert(this.header);
                },
            }
        };
    </script>
    
    <style>
        /* 组件的样式 */
        .header{
            border:1px solid pink;
            height:50px;
            line-height: 50px;
        }
    </style>

> 再定义一个App.vue文件，这个文件的作用是vue页面资源的首加载项，是主组件，页面入口文件，所有页面都是在App.vue下进行切换的；App.vue负责构建定义及页面组件归集。

*  一般就是指整个vue项目的根组件，用来展示组件中内容
 *  App.vue是针对整个项目称作根组件，template下的子元素是针对当前的vue实例称作根组件

> 在App.vue中引入所创建的PageHeader.vue

![在这里插入图片描述][ecdd4db4731d490589f1730c6cce116d.png]

<template>
        <div>
            <PageHeader></PageHeader>
        </div>
    </template>
    
    <script>
        //引入组件
        import PageHeader from './PageHeader';
        export default {
            name:'App',
            components:{
                PageHeader
            }
        }
    </script>
    
    <style></style>

> 创建一个main.js，main.js是项目的入口文件，项目中所有的页面都会加载main.js。它的作用如下

*  实例化Vue
 *  放置项目中经常会用到的插件和CSS样式
 *  存储全局变量

import App from './App.vue';
    
    new Vue({
        el:'#root',
        components:{
            App
        },
        template:`<App></App>`,
        data:{}
    });

# 二、脚手架安装 #

## 2.1 什么是脚手架? ##

> 什么是脚手架?肯定不是图片这种

![在这里插入图片描述][f24742ef243541518b4f10f243737c59.png]

> 在聊到脚手架之前我们必须知道浏览器本身并不能够直接展示.vue文件，所以必须对.vue文件进行加载解析，这时候就需要vue-loader，需要注意的是vue-loader是基于webpack的 ,所以要想用 vue-loader必须先安装webpack；那什么是webpack呢?

*  webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
 *  webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
 *  简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出

> 扯了一堆之后告诉你，脚手架就是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。

## 2.2 使用镜像 ##

> 如何在本机安装脚手架?win+r快捷键然后输入cmd打开命令提示符界面。

![在这里插入图片描述][9a74029e606044318f8c4756600345fa.png]

> 在命令行复制命令如下，按回车；这是为了避免下载缓慢而配置的淘宝镜像。

npm config set registry https://registry.npm.taobao.org

![在这里插入图片描述][81a94fce36044436a56d4dea1d4fc192.jpeg]

## 2.3 全局安装vue/cli ##

> 接下来全局安装vue/cli，CLI也就是脚手架，C是command，L是line，I是interface，直译为命令行接口工具

npm install -g @vue/cli

![在这里插入图片描述][ce4998205e524f18977787454126688c.jpeg]

> 重启cmd输入vue查看版本

![在这里插入图片描述][5f20fd92e532494fbcd864531066e049.jpeg]

## 2.4 创建并启动项目 ##

> 接下来就是创建第一个vue项目了，通过命令选中一个文件夹并输入命令如下，名字可以随意取，但记得不要与关键字重名。下图是输入创建脚本后的界面，选择Vue的版本，第一行是脚手架的版本号，后面是选择vue2或者vue3，这里选v2就可以。

vue create vue_test

![在这里插入图片描述][9689c1ec165743d0a77a771c6b171f16.jpeg]

> 到这一步就成功创建了，在命令窗口中显示successfully。

![在这里插入图片描述][7101cf6f74fa48b386652b409ba2da46.jpeg]

> 按它提示的步骤输入命令访问到所创建项目的位置并启动项目，它会给出启动后的项目地址，复制到浏览器即可访问。

cd cli_test
    npm run serve

![在这里插入图片描述][954bfa65c41c4a6faf1d2074469fed47.jpeg]

![在这里插入图片描述][fe4d9893085147fb913751150f9721c5.jpeg]

[968f4c3a9001403aaa609f4e85ac2933.gif]: https://img-blog.csdnimg.cn/968f4c3a9001403aaa609f4e85ac2933.gif
[b28f580949e34d38bca276954e6215f3.png]: https://img-blog.csdnimg.cn/b28f580949e34d38bca276954e6215f3.png
[c4afdc8bb7064239a5d2c1b0d4454709.png]: https://img-blog.csdnimg.cn/c4afdc8bb7064239a5d2c1b0d4454709.png
[30fc3ed638ba4fe7a3350f094fed5aef.png]: https://img-blog.csdnimg.cn/30fc3ed638ba4fe7a3350f094fed5aef.png
[e221c9391b1241bc877d43b08d7bebf1.png]: https://img-blog.csdnimg.cn/e221c9391b1241bc877d43b08d7bebf1.png
[e9c83655692f4ceaae0b2c9cfe2c7e5d.png]: https://img-blog.csdnimg.cn/e9c83655692f4ceaae0b2c9cfe2c7e5d.png
[e2f948bb83304e01a64a7c0161123c16.png]: https://img-blog.csdnimg.cn/e2f948bb83304e01a64a7c0161123c16.png
[9a58b972c2684a0dad0e887a859de801.png]: https://img-blog.csdnimg.cn/9a58b972c2684a0dad0e887a859de801.png
[ecdd4db4731d490589f1730c6cce116d.png]: https://img-blog.csdnimg.cn/ecdd4db4731d490589f1730c6cce116d.png
[f24742ef243541518b4f10f243737c59.png]: https://img-blog.csdnimg.cn/f24742ef243541518b4f10f243737c59.png
[9a74029e606044318f8c4756600345fa.png]: https://img-blog.csdnimg.cn/9a74029e606044318f8c4756600345fa.png
[81a94fce36044436a56d4dea1d4fc192.jpeg]: https://img-blog.csdnimg.cn/81a94fce36044436a56d4dea1d4fc192.jpeg
[ce4998205e524f18977787454126688c.jpeg]: https://img-blog.csdnimg.cn/ce4998205e524f18977787454126688c.jpeg
[5f20fd92e532494fbcd864531066e049.jpeg]: https://img-blog.csdnimg.cn/5f20fd92e532494fbcd864531066e049.jpeg
[9689c1ec165743d0a77a771c6b171f16.jpeg]: https://img-blog.csdnimg.cn/9689c1ec165743d0a77a771c6b171f16.jpeg
[7101cf6f74fa48b386652b409ba2da46.jpeg]: https://img-blog.csdnimg.cn/7101cf6f74fa48b386652b409ba2da46.jpeg
[954bfa65c41c4a6faf1d2074469fed47.jpeg]: https://img-blog.csdnimg.cn/954bfa65c41c4a6faf1d2074469fed47.jpeg
[fe4d9893085147fb913751150f9721c5.jpeg]: https://img-blog.csdnimg.cn/fe4d9893085147fb913751150f9721c5.jpeg