Vue 2.0-＞3.0学习笔记（第三章使用Vue脚手架）

普宁彭于晏

于 2024-09-28 20:49:22 发布

阅读量385

点赞数 13

文章标签： vue.js 学习笔记前端

本文链接：https://blog.csdn.net/PNPYY/article/details/142620637

版权

Vue 2.0-＞3.0学习笔记（第三章使用Vue脚手架）

1. 初始化脚手架
- 1.1 说明
- 1.2 具体步骤
2. 分析脚手架结构

1. 初始化脚手架

1.1 说明

笔记
1 . Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。
2 . 最新的版本是4.x。
3 . 文档：Vue-Cli文档链接

1.2 具体步骤

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

npm install -g @vue/cli

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

vue create xxxx

第三步：启动项目

npm run serve

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

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

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

vue inspect > output.js

2. 分析脚手架结构

2.1 node_modules

笔记

node_modules：存放项目依赖的第三方库。

2.2 public

笔记

public：存放静态资源，如图片、字体等。

2.2.1 favicon.ico

笔记

favicon.ico：这是一个网站的图标文件，通常显示在浏览器的地址栏、标签页或书签栏上。它可以帮助用户快速识别网站，提高用户体验。

2.2.2 index.html

笔记

index.html：这是网站的主页文件，当用户访问一个网站时，通常会首先加载这个文件。index.html 文件包含了网站的主要内容，如文本、图片、视频等。此外，还可以在其中嵌入 CSS 样式表、JavaScript 脚本以及链接到其他资源（如字体、音频等）。
<!DOCTYPE html> ：文档类型声明，它告诉浏览器这个文档是使用 HTML5 标准编写的。
<html lang=""> ：标签定义了整个 HTML 文档的语言属性。lang 属性的值应该是一个有效的语言代码，比如 “en” 代表英语，“zh” 代表中文等。这个属性对于搜索引擎优化和辅助技术（如屏幕阅读器）非常有用。
<meta charset="utf-8"> ：元数据标签，它定义了文档使用的字符编码。UTF-8 是一种非常常见的字符编码，它可以表示几乎所有的 Unicode 字符，包括各种语言的文字、符号等。设置正确的字符编码可以避免因字符编码不一致而导致的乱码问题。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> ：针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高渲染级别渲染页面。
<meta name="viewport" content="width=device-width,initial-scale=1.0"> ：开启移动端的理想视口。
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> ：配置页签图标。
<title><%= htmlWebpackPlugin.options.title %></title> ：配置网页标题。
<noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript>：当浏览器不支持js时，noscript中的元素就会被渲染。

2.3 src

笔记

src：存放项目源代码

2.3.1 assets

笔记

assets：存放项目中的资源文件，如样式表、图片等。

2.3.2 components

笔记

components：存放组件文件（.vue），每个组件一个文件。

2.3.3 App.vue

笔记

App.vue：项目的主组件，通常包含页面的主要布局和导航。

2.3.4 main.js

笔记

main.js：项目的入口文件，用于初始化 Vue 实例并挂载到 DOM。

关于不同版本的Vue:

vue.js与vue.runtime.xxx.js的区别：
（1）.vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）.vue.runtime.xxx.js是运行版的Vue，只包含：核心功能：没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

  // 该文件是整个项目的入口文件
  // 引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建Vue的实例对象 --- vm
new Vue({
  //将App组件放入容器中
  render: h => h(App),
  // render:q => q('h1','你好啊')

  // template:`<h1>你好啊</h1>`,
  //components:{App},
}).$mount('#app')