“Vue 脚手架结构”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
（未显示同一用户的7个中间版本）
第1行： 第1行：
 
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=62
 
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=62
 +
 +
=== 目录、文件简介 ===
 
{| class="wikitable"
 
{| class="wikitable"
 
|→ node_modules
 
|→ node_modules
第5行： 第7行：
 
|用到的第三方库
 
|用到的第三方库
 
|-
 
|-
−
|→ public
+
|↓ public
 
|
 
|
 
|
 
|
 +
|-
 +
|
 +
|favicon.ico
 +
|网站页签图标
 +
|-
 +
|
 +
|index.html
 +
|网站首页，main.js 里 .$mount('#app') 中 id 为 app 的 DOM 元素在 index.html 里声明
 
|-
 
|-
 
|↓ src
 
|↓ src
第19行： 第29行：
 
|
 
|
 
|→ components
 
|→ components
−
|
+
|各种组件
 
|-
 
|-
 
|
 
|
第100行： 第110行：
 
})
 
})
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
=== index.html 说明 ===
 +
<syntaxhighlight lang="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">
 +
    <!--
 +
    取的是 package.json 中的 name，
 +
    webpack 一个插件实现的功能，
 +
    -->
 +
    <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>
 +
</syntaxhighlight>
 +
 +
=== noscript 标签测试 ===
 +
demo.html<syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html lang="zh-CN">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <title>Document</title>
 +
</head>
 +
<body>
 +
    <h1>你好</h1>
 +
    <noscript>
 +
        <strong>不好意思，你的浏览器不支持 JS</strong>
 +
    </noscript>
 +
</body>
 +
</html>
 +
</syntaxhighlight>正常打开页面只能看到<code>你好</code>但如果从浏览器中关闭了 JS 的支持（浏览器 > 设置 > 网站设置 > 内容 > JavaScript > 不允许使用 JavaScript），就会看到<code>不好意思，你的浏览器不支持 JS</code>

2024年8月11日 (日) 01:55的最新版本

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=62

目录、文件简介

→ node_modules 用到的第三方库
↓ public
favicon.ico 网站页签图标
index.html 网站首页，main.js 里 .$mount('#app') 中 id 为 app 的 DOM 元素在 index.html 里声明
↓ src
→ assets 静态资源，图片、视频……
→ components 各种组件
App.vue
main.js npm run serve 运行之后，就会去运行 main.js，该文件是整个项目的入口文件
.gitignore git 的忽略文件
babel.config.js babel 的配置文件，ES6=>ES5 配置
package-lock.json 包版本控制文件，锁定用到的包的版本
package.json NPM 包说明文件，配置包名、版本、依赖、常用命令
scripts.serve 开发过程中，运行 npm run serve，实际执行的就是这里的命令，脚手架会配置好服务器
scripts.build 代码写完、开发完成之后，.vue => .html、.css、.js，这是最后的一次编译
scripts.lint 几乎不用，对代码进行语法检查，很少执行，因为IDE、如 VS Code 有很好的语法检查插件，会在开发时帮开发者检查
README.md 教程、笔记

验证“执行完 npm run serve 之后，就会运行 main.js”

把 main.js 里的代码暂时注释，替换成：

/*
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
*/

console.log("Hello World!");

运行 npm run serve，观察浏览器控制台输出。

main.js 文件说明

/**
 * 该文件是整个项目的入口文件
 */
//引入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),
}).$mount('#app')

//上面和下面的代码是不同的写法、实现一样的功能
new Vue({
  el:'#app',
  render: h => h(App),
})

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">
    <!--
    取的是 package.json 中的 name，
    webpack 一个插件实现的功能，
    -->
    <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>

noscript 标签测试

demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>你好</h1>
    <noscript>
        <strong>不好意思，你的浏览器不支持 JS</strong>
    </noscript>
</body>
</html>

正常打开页面只能看到你好但如果从浏览器中关闭了 JS 的支持（浏览器 > 设置 > 网站设置 > 内容 > JavaScript > 不允许使用 JavaScript），就会看到不好意思，你的浏览器不支持 JS

取自“https://www.jihongchang.top/index.php?title=Vue_脚手架结构&oldid=8172”