Vue2.0 Vue分析脚手架结构

最新推荐文章于 2023-03-21 17:25:17 发布

结城明日奈是我老婆

最新推荐文章于 2023-03-21 17:25:17 发布

阅读量597

点赞数

分类专栏： # vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121950004

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

因云盘没有固定路径，所以创建Vue只能在本地存储里的本地磁盘中用vue create xxx创建vue-cli

最开始根目录下的文件

第一个`.gitignore`

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

git的忽略文件;哪些文件或文件夹不想接受git的管理,你在这配好,关掉,结束

babel.config.js(重要)

重要归重要,不需要我们在里面写东西;babel控制文件你得告诉配置一下怎么转换，采用什么样的标准

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

直接用官方写好的，但是有些人比较好奇，可以参考babel中文官网文档

package.json

只要你打开的工程是一个符合npm规范的，那么一定会有包的说明数(package.json)

name:名字

version:版本

dependencies:采用的依赖

"core-js": "^3.6.5","vue": "^2.6.11":里面用了哪些库

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

常用的一些命令

我们执行npm run serve其实是执行了vue-cli-service serve

"serve": "vue-cli-service serve":是属于我们在开发的过程中你去使用这个命令让人家帮你配置好一个服务器,帮你把东西都弄好了
"build": "vue-cli-service build":属于是我的代码写完了,我的功能开发完了,人家后端找我要东西;你得给人家的是.html、.css、.js,所以build是构建的意思;所有的功能都写完了最终想把整个工程变成一个浏览器能够认识的东西,那你执行这个(也就是最后一次编译)
"lint": "vue-cli-service lint":几乎不用。如果你执行了这个lint那就是把整个代码里面写过的js、vue文件全都进行一次语法检查,告诉你哪写的不对，哪写的不太好。因为插件里面有更好的检查;语法检查肯定要检查，但是要有个度。所以不太用

package-lock.json

这个是包版本控制文件:你用到了一个包,这里记录着包的版本信息(version)，记录着下载地址信息(resolved)

等你以后再安装这个东西的时候它能保证最快的速度给你安装到指定版本,如果没有这个lock文件版本就锁不住了:如果你又下载一个文件的时候很有可能帮你下载一个8.x.xx,一般我们这个文件就留着

READMI.md

对整个工程进行一个说明、描述

大BOSS—src

执行了npm run serve之后,它首先是找到哪个文件开始运行，然后一点一点摸排清楚

里面有俩个文件夹和俩个文件

App.Vue文件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

看一下App的结构(<template></template>):

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<img alt="Vue logo" src="./assets/logo.png">:引入外部的图片(当前目录下assets的logo.png文件)
<HelloWorld msg="Welcome to Your Vue.js App"/>:引入一个HelloWorld

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

import HelloWorld from './components/HelloWorld.vue':引入了一个HelloWorld组件在当前文件下的components文件夹下的HelloWorld.vue文件

main.js文件

src中有个特别重要的人,叫main.js,重要到当你执行完npm run serve命令之后,直接去运行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(666)

npm run serve

[HMR] Waiting for update signal from WDS...
666

[HMR] Waiting for update signal from WDS…:等待更新的信号

/*
该文件是整项目的入口文件
*/
//引入Vue 所有的依赖都安装在node_modules文件夹中
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')

除了render: h => h(App),都看得懂接下来就看App.vue里面了(render函数)

assets文件夹

这个文件夹名称经常在前端的项目里面出现,这个文件夹一般放静态资源；一般放图片视频等

components文件夹

叫组件们；所有程序员写得组件都往里面放,唯独App.vue

从npm run serve开始

npm run serve -> main.js -> App.vue -> 组件们 -放到了-> index.html

public文件夹

favicon.ico

网站得页签图标

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>

<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">:你的项目开发完了，部署到服务器上的时候容易产生一个奇奇怪怪的路径错误,脚手架是这么说的:你在这个html里面如果想引入文件,你别'./','../','/'都不要写了就写<%= BASE_URL %>
<%= BASE_URL %>:指的就是public所在的路径,这个就代表了以前的'./'了,底层是有处理的

<title><%= htmlWebpackPlugin.options.title %></title>:配置网页标题
<%= htmlWebpackPlugin.options.title %>:就是默默来到package.json当中,去找name。这是webpack里面的一个插件完成的功能,你只要这么写那就会去package.json中去找

<noscript></noscript>:如果你的浏览器不支持js那么'<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>'就会出现到页面上

其他都可以删，唯独容器的<div>不能删