Vue-cli脚手架生成的代码介绍

目录概览

上一节：Vue3.0基础项目的创建【配合gitee】

package.json文件

查看脚手架初始化项目后，里面的文件目录，首先看package.json。这个文件可以理解为项目的描述文件。重点关注3个部分：

{
  "name": "vue-music-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
     ...
  }
}

npm-scripts

当我们运行npm run serve的时候，实际上就会运行scripts描述中的vue-cli-service serve这个命令。

通过vue-cli内置的一个服务来开启我们本地的一个服务。当然开启服务还提供打包：build，检查lint等服务，所以当之星npm run xx时候就是执行scripts中的脚本。

dependencies

是项目运行时的依赖。运行时的依赖，是指最终会打包到程序的vendor.js中，在浏览器运行项目的时候，会请求到这些JS，也就是dependencies种的所有项都会打包进我们的项目中。

devDependencies

是开发时的依赖。为了辅助我们开发，我们需要依赖一些工具。这里我们大量依赖vue-cli提供 的一些插件和服务。如：

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
}

这里底层还是依赖webpack，这里就是对webpack做了一层封装。脚手架的插件帮我们做了很多事情。这些代码不会最终打包进你运行时的代码。包裹eslint/node-sass等，不会影响最终的运行。

因此当我们安装一些库，如果是运行时用的就要放到dependencies中；如果是开发时用的就需要放到devDependencies中。

其他配置文件

.browserslistrc

浏览器兼容性的配置文件。可以配置支持哪些浏览器。

.editorconfig

编辑器的配置文件，通过修改他配置编辑器。比如：

[*.{js,jsx,ts,tsx,vue}]
indent_style = space  // 缩进方式：通过空格
indent_size = 2          //  缩进：2个空格
trim_trailing_whitespace = true   // 尾部的空白字符trim掉
insert_final_newline = true

.eslintrc.js

ESlint的一些配置。以及修改、扩展一些lint规则。

.gitignore

这个文件中的文件和目录，是不会提交到git中的。

babel.config.js

babel的配置。这里配置了一个预设，如下是vue-cli提供的babel的plugin的预设。

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

package-lock.json

对我们npm版本依赖的一个锁。第一次安装后生成，会对package.json中dependencies中的版本号去验证，如果与lock中的相同，那么就不会去下载新的版本，而依然使用lock的版本；除非手动修改升级package.json中比如vue版本号之类的信息，对比lock文件发现版本不一致，他才会下载新的文件。

文件目录

node_modules

package.json中安装的依赖、库都放在这个文件夹中。

public

index.html-入口html文件

<div id="app"></div>
<!-- built files will be auto injected  打包生成的JS和CSS会插入到此处 -->

JS的入口文件是src/main.js。

JS入口文件src/main.js

// main.js 编译阶段会找到这个文件做一些编译
// vue3渲染的方式 引入createApp函数
import { createApp } from 'vue'
// 引入app组件
import App from './App.vue'
import router from './router'
import store from './store'
/* 
通过 createApp方法生成一个app实例
.use是vue3使用插件的一个方式，执行use(store)或use(router)时候
会执行他们内部的初始化工作，比如注入store和router实例等，
use支持链式调用，会返回app对象，
最终通过mount挂载到id位app的节点上，即通过.mount方式将其渲染出来。
*/
createApp(App).use(store).use(router).mount('#app')

router/index.js:

// router暴漏出来的方法
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [..]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

store/index.js:

// store暴漏出来的方法
import { createStore } from 'vuex'
export default createStore({...})

组件存放