学习笔记之Vue脚手架（三）

news2025/10/31 12:59:41

（三）使用Vue脚手架

使用Vue脚手架

（三）使用Vue脚手架
- 一、创建Vue脚手架
- - 1.1 说明
  - 1.2 具体步骤
- 二、分析脚手架结构
- - 2.1 配置文件
  - 2.2 src文件夹
  - 2.3 public文件夹

一、创建Vue脚手架

1.1 说明

1.Vue脚手架是Vue官方提供的标准开发工具（开发平台）。

2.最新的版本是4.x

3.文档：https://cli.vuejs.org/zh/

1.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli

npm install -g @vue/cli

这里注意：如果安装报错，很有可能是权限不够，需要使用管理员身份安装。

然后验证vue是否可以执行：

第二步：切换到自己要创建项目的目录，然后使用命令创建项目。

vue create xxxx

然后会出现一个选项，直接选第一个即可：

第三步：启动项目

npm run serve

最后创建的文档里是这样：

并且运行后，访问http://localhost:8080/是如下页面：

备注：

1.如出现下载缓慢请配置npm淘宝镜像:

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

2.Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpakc配置，请执行：

vue inspect > output.js

二、分析脚手架结构

创建完脚手架后，会出现以下文档：

2.1 配置文件

（1）.gitignore文件

git的忽略文件：哪些文件夹不想接受git管理，就可以在此文件中进行配置。

（2）babel.config.js文件

babel的控制文件，babel是将ES6转为ES5，所以要进行配置，但是脚手架已经配置好了，如果还想需要了解，可以去babel官网，其中讲解了如何配置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1CgghCmp-1672930882412)(https://typroa-cos-1304737216.cos.ap-beijing.myqcloud.com//x_img/image-20230103231232061.png)]

（3）package.json文件

包的说明书，只要符合npm规则就会出现package-lock.json和package.json文件。

其中配置了包的名字、版本，以及配置采用的依赖用的什么库等等，都会在这个文件中。

而且常用的命令也在这里：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
 },

npm run serve = vue-cli-service serve：在开发的过程中配置好服务器等等。
npm run build = vue-cli-service build：功能代码完成后，要向后端传输数据，所以要将.html、.css、.js文件给后端，所以要构建，使浏览器可以认识它。
npm run lint = vue-cli-service lint：对所有的js和.vue文件进行语法检查。

（4）package-lock.json

此文件是将需要指定版本的包以最快速度安装好，就相当于将包的版本锁死，如果没有此文件，那么会下载任何版本的包。

（5）README.md

对整个工程进行描述。

2.2 src文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGTKZzuS-1672930882415)(https://typroa-cos-1304737216.cos.ap-beijing.myqcloud.com//x_img/image-20230103232441533.png)]

（1）main.js文件（入口文件）

首先我们先将所有的代码注释掉，然后输出666。

运行之后显示如下：

所以可以说明：该文件是这个项目的入口文件。

main.js文件代码如下：

// 该文件是整个项目的入口文件

//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'

//关闭vue的生产提示
Vue.config.productionTip = false

//创建Vue实例对象————vm
new Vue({
  el:'#app',
  //完成就将组件放入到容器中
  render: h => h(App),
})

（2）App.vue

App组件是所有组件的父组件，汇总其他所有组件，其中结构就和.vue文件结构一样，三个标签。

（3）assets文件

此文件中存放的是静态资源：

（4）components文件

此文件中存放着除了App组件外的所有组件，这些组件都是由App组件来管理：

2.3 public文件夹

（1）favicon.ico

网站的页签图标

（2）index.html

页面文件，文件代码解释如下：

<!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">
    <!-- 配置页签图片  <%= BASE_URL %>就代表的是./（public路径下）-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <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>