Vue脚手架简单分析

最新推荐文章于 2023-02-15 16:04:15 发布

m0_61689897

最新推荐文章于 2023-02-15 16:04:15 发布

阅读量105

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/m0_61689897/article/details/120218909

版权

Src文件下的各个文件分析

1.main.js

(1).执行 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({
// render: h => h(App),完成了将App组件放入app容器中
  render: h => h(App),
}).$mount('#app')

2.assets文件夹

静态资源文件夹，例如，png,视频等。

3.components 组件文件

各个组件

4.App.vue 父组件（所有组件的父组件）

public文件（非src内文件）

** 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">
    <!--配置页签图标-->
    <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>

***npm run serve 运行，找到msin.js，里面引入了vue,引入了App组件，然后进入App组件，App组件内引入了另外的其他组件，执行引入的其他组件，执行完毕后，执行最终汇总到了App组件中，mian.引入了App组件，在main.js中通过render:h =>(App),将App组将放到了app容器中（即放到了public下的index.html中的app容器中）。

m0_61689897

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue脚手架简单分析

Src文件下的各个文件分析1.main.js(1).执行 npm run serve 直接开始运行 main.js （很重要，是一切的开端）//该文件是整个项目的入口文件//引入Vueimport Vue from 'vue'//引入App组件，它是所有组件的父组件import App from './App.vue'//关闭vue的生产提示Vue.config.productionTip = false//创建Vue实例对象---vmnew Vue({// rende
复制链接

扫一扫