Vue 脚手架结构

来自姬鸿昌的知识库
跳到导航 跳到搜索

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”