分析脚手架文件结构

最新推荐文章于 2024-07-18 16:57:05 发布

qq_26326471

最新推荐文章于 2024-07-18 16:57:05 发布

阅读量47

点赞数

分类专栏：学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_26326471/article/details/127523669

版权

学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

## 脚手架文件结构
   node_modules
   public
         favicon.ico:网页图标
         index.html:主页面
    src
        assets:存放静态资源
            logo.png
        component:存放组件
            helloWorld.vue
        App.vue:汇总所有组件
        main.js:入口文件
    .gitignore:git版本管制忽略的配置
    babel.config.js:babel的配置文件
    package.json: 应用包配置文件
    README.md: 应用描述文件
    package-lock.json: 包版本控制文件

## 关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别
  (1.)vue.js是完整版的Vue,包含:核心功能+模板解析器
  (2.)vue.runtime.xxx.js是运行版的Vue, 只包含:核心功能:没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用
  render函数接收到的createElement函数去指定具体内容

## vue.config.js配置文件
 使用vue inspect output.js可以查看到Vue脚手架的默认配置
 使用vue.config.js可以对脚手架进行个性化定制, 详情见: https://cli.vuejs.org/zh

---------------------------------------------------------------------------------------

<!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>