1. 项目框架
1.1 项目架构图
整体搭建架构图如下：
image.png
1.2 项目结构
以vue-cli 2.0 版本为例，其中src文件夹是需要掌握的
image.png
2.入口文件解析
项目加载的过程是index.html->main.js->app.vue->index.js->helloworld.vue ，前面的四项是入口相关文件。
2.1 项目运行入口文件 index.html
index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>y</title>
</head>
<body>
<div id="app"> wwww</div>
<!-- built files will be auto injected -->
</body>
</html>
这里id='app'，这个id将会连接到src/main.js，把vue实例挂载到的该dom元素，这里没有引入任何的js，css，都是通过webpack实现的
2.2 项目入口文件 main.js
其作用有三：
- 定义了vue实例
- 挂载到index.html中id为‘app’的节点上
- 引入根组件app.vue
- 引入路由文件
import Vue from 'vue'
import App from './App'
// 引入路由文件: router 文件下的 index.js 文件(文件夹后没有具体的文件，默认引入的就是 index.js 文件)
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
/**
* 创建Vue实例
* 挂载到index的dom元素上
* 引入跟组件
* 跟组件模板替换替换挂载的元素
*/
new Vue({
el: '#app', // 挂载到index.html
router, //引入路由
components: { App }, // Vue 实例可用组件列表, 在这里引入根组件。组件名为APP，也可以修改组件名字：{'root':App}
template: '<App/>'// 模板（根组件）将会替换挂载的元素，挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
})
几个疑问：
- main.js为什么叫入口文件？
- 运行后index.html实际页面中仅挂载了app.js一个脚本，所有组件去哪儿了，app.js是如何形成的？
- vue实例化在main.js中，但在index.html中并没有引入main.js，main.js与index.html是如何产生关联的？
而上述问题都是由webpack逐一处理的，vue cli搭建的项目本质是一个集成预设置的webpack项目。具体解决手段：
- 入口文件是一个webpack概念；入口文件是webpack构建内部依赖图的起点。
- app.js是由webpack打包生成的输出文件。
- 而将app.js挂载到index.html这一过程是由webpack的一个插件——html-webpack-plugin完成的。
在webpack.base/webpack.dev中，vue默认设置main.js为项目的唯一入口。,在项目打包时，webpack会从main.js开始构建依赖图，梳理整个项目依赖且不重复的模块。
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
//filename定义的是输出文件的名称，[name]是webpack中的占位符，它对应entry中对象的键名。
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
2.3 根组件 app.vue
它的作用：单页面应用的主组件。所有页面都是在 App.vue 下通过路由进行切换的。所以，我们可以理解为所有的路由（route）也是 App.vue 的子组件。
（1）App.vue中的内容，是一个标准的App.vue模板的形式，包含了<template></template>、<script></script>、<style></style>三部分。node 之所以可以识别出 *·vue 格式的文件，webpack 在编译时将 *.vue 文件中的 html 、js 、css 都抽出来形成新的单独文件。
（2）<template>标签下，有<router-view>标签， 当访问根路由 http://localhost:8080/#/ 时，App.vue 中的 <router-view/> 就会把引入的 HelloWorld 组件分配渲染。
根组件的核心就是通过<router-view />加载不同组件渲染
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
2.4 路由文件 router/index.js
这个文件就是路由的核心文件，具体配置：
import Vue from 'vue' // 引入Vue
import Router from 'vue-router' // 引入vue-router
import HelloWorld from '@/components/HelloWorld' // 引入根目录下的HelloWorld.vue组件
Vue.use(Router) // Vue全局使用Router
export default new Router({
// 配置路由，这里是个数组
routes: [
{ // 每一个链接都是一个对象
path: '/', // 链接路径
name: 'HelloWorld', // 路由名称，
component: HelloWorld // 对应的组件模板
}
]
})
路由是根据 url 来分配不同的组件。
如果访问：http://localhost:8080/#/vue，需要配置/vue路由
{
path: '/vue',
name: 'vue',
component: Vue
}
如果访问：http://localhost:8080/#/vue/demo，详细配置：
{
path: '/vue',
name: 'vue',
component: Vue,
children: [
{
path: '/demo',
component: demo,
},
{
path: '/project',
component: project,
},
],
}
3. vue-cli关闭/禁用/使用ESLint语法检测功能
使用vue-cli命令‘vue init webpack 项目名称’创建项目的过程中，如果无意选择了ESLint语法检测，会在项目目录中出现如下的ESLint配置文件。
image.png
（1）禁用ESLint
在项目的本目录下面config—index.js 文件夹中配置一下就可以禁用useEslint设为false。
image.png
4.webpack配置
4.1打包配置解析
webpack必备的配置文件package.json存放了各种命令，这里核心的是运行命令和编译打包命令
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"build": "node build/build.js"
}
（1）打包命令build
image.png
流程详解:
一：build.js
第一步运行的入口文件，载入生产环境配置文件webpack.dev.conf.js
二：配置webpack
与环境无关的公共配置都放在webpack.base.conf.js中，和环境有关的分开配置，比如：生产环境配置webpack.prod.conf.js，开发环境配置webpack.dev.conf.js。使用的时候两个对象合并，比如公共配置合并到生产环境配置中
//webpack.prod.conf.js
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
.........
})
三：配置信息
存放一些配置信息常量。和配置webpack思路类似，公共配置信息放在index.js中，和环境有关的分开放在配置信息，所有的配置信息放在config目录下。然而实际详情是在index.js文件中各个环境的配置已分开，没有公共部分。
4.2 运行命令解析
image.png
流程和打包配置类似
网友评论