17，故事的小黄花 从出生那年就飘着，vue-cli知识点晃到了现在。

学习目标：

提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习
重磅来袭：3个月掌握 vue 入门知识到实战学代码。

---

学习内容：

提示：本节第17节内容：vue-cli知识点
学习本节视频需要掌握的知识点：
1.HTML
2.CSS
3.JavaScript
那么关于上面三个知识点，视频学习地方在：html5+css3+js+jquery课程

2021【前端VUE框架】本节第17节内容：vue-cli知识点

---

学习时间：

提示：2020现在-2021.1月
一。无基础的同学，有充足的事件可以一天学习两节内容，要多写代码，一个案例和知识点最少要敲代码3到4遍：
二。有基础的同学可以自由安排事件哈：
1、 周一至周五晚上 7 点—晚上9点
2、 周六上午 9 点-上午 11 点
3、 周日下午 3 点-下午 6 点

---

学习产出：

提示：在网站上
例如：
1、 技术笔记 2 遍 ，在你自己的电脑学代码。
2、tofacebook.com, 发布技术文章 1 篇

本届知识点内容如下：

题言：

相信很多vue新手，都像我一样，只是知道可以用vue-cli直接生成一个vue项目的架构，并不明白，他究竟是怎么运行的，现在我们一起来研究一下。。。

一、安装vue-cli，相信你既然会用到vue-cli，自然node环境是OK的，直接命令行下安装

npm install -g vue-cli

二、使用vue-cli创建vue项目

用法： vue init <template-name> <project-name>

template-name:
    . webpack
    . webpack-simple  // 一个简单webpack+vue-loader的模板，不包含其他功能。
    . browserify     //  一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
    . browserify-simple  // 一个简单Browserify+vueify的模板，不包含其他功能。
    . pwa           // 基于webpack模板的vue-cli的PWA模板
    . simple      //  一个最简单的单页应用模板   

常用的就是webpack了，模板之间的不同，自己体验

常用的就是webpack了，模板之间的不同，自己体验

示例：

vue init webpack my-project

执行指令后，会让用户输入几个基本的选项，如图所示

需要注意的是项目的名称不能大写，不然会报错。

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置git，他会读取.ssh文件中的user。
• Install vue-router? 是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也是一样的。
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格
• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
• Should we run npm install for you after the project has been created?(recommended)npm
  Should we run npm install for you after the project has been created?(recommended)npm
  询问你使用npm安装还是yarn安装包依赖，我这里选择的是npm，yarn更快更好，使用yarn之前确保你的电脑已经安装yarn。

根据提示，待模板加载完成之后,执行下面两条命令

cd my-project

npm run dev   // dev代表下图框选的内容123

出现如图，就是编译成功了，英文稍微好点，就能读懂

出现如图，就是编译成功了，英文稍微好点，就能读懂

这时候，鼠标放到 http://localhost:8080 会提示用“Alt+点击”即可访问；

出现如图，就是编译成功了，英文稍微好点，就能读懂

这时候，鼠标放到 http://localhost:8080 会提示用“Alt+点击”即可访问；

出现如图，就成功创建了项目；

三、文件目录结构

本文主要分析开发（dev）和构建（build）两个过程涉及到的文件，故下面文件结构仅列出相应的内容。

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试脚本的配置
|-- src                              // 源码目录
|   |-- components                   // vue所有组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- test                             // 测试文件
|   |-- e2e                          // e2e 测试
|   |-- unit                         // 单元测试
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .eslintignore                    // eslint检测代码忽略的文件（夹）
|-- .eslintrc.js                     // 定义eslint的plugins,extends,rules
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明，markdown文档
|-- index.html                       // 访问的页面
|-- package.json                     // 项目基本信息,包依赖信息等

如图所示：

下边是具体文件的具体分析

1. package.json文件

package.json文件是项目的配置文件，定义了项目的基本信息以及项目的相关包依赖，npm运行命令等

scripts 里定义的是一些比较长的命令，用node去执行一段命令，比如

npm run dev

其实就是执行

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

这句话的意思是利用 webpack-dev-server 读取 webpack.dev.conf.js 信息并启动一个本地服务器。

2. dependencies VS devDependencies

简单的来说

dependencies 是运行时依赖（生产环境）       npm install --save  **(package name)
devDependencies 是开发时的依赖（开发环境）  npm install --save-dev  **(package name)12

3. 基础配置文件 webpack.base.conf.js

基础的 webpack 配置文件主要根据模式定义了入口出口，以及处理 vue, babel等的各种模块，是最为基础的部分。其他模式的配置文件以此为基础通过 webpack-merge 合并。

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

// 获取绝对路径
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
<!-- 定义一下代码检测的规则 -->
const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  // 基础上下文
  context: path.resolve(__dirname, '../'),
  // webpack的入口文件
  entry: {
    app: './src/main.js'
  },
  // webpack的输出文件
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath 
      : config.dev.assetsPublicPath  
  },
  /**
   * 当webpack试图去加载模块的时候，它默认是查找以 .js 结尾的文件的，
   * 它并不知道 .vue 结尾的文件是什么鬼玩意儿，
   * 所以我们要在配置文件中告诉webpack，
   * 遇到 .vue 结尾的也要去加载，
   * 添加 resolve 配置项，如下：
   */
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {  // 创建别名
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),  // 如 '@/components/HelloWorld'
    }
  },
  // 不同类型模块的处理规则 就是用不同的loader处理不同的文件
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {// 对所有.vue文件使用vue-loader进行编译
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {// 对src和test文件夹下的.js文件使用babel-loader将es6+的代码转成es5
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {// 对图片资源文件使用url-loader
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          // 小于10K的图片转成base64编码的dataURL字符串写到代码中
          limit: 10000,
          // 其他的图片转移到静态资源文件夹
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {// 对多媒体资源文件使用url-loader
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          // 小于10K的资源转成base64编码的dataURL字符串写到代码中
          limit: 10000,
          // 其他的资源转移到静态资源文件夹
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {// 对字体资源文件使用url-loader
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // hash:7 代表 7 位数的 hash
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

4. 开发环境配置文件 webpack.dev.conf.js

   ‘use strict’
   const utils = require(’./utils’)
   const webpack = require(‘webpack’)
   const config = require(’…/config’) // 基本配置的参数
   const merge = require(‘webpack-merge’) // webpack-merge是一个可以合并数组和对象的插件
   const path = require(‘path’)
   const baseWebpackConfig = require(’./webpack.base.conf’) // webpack基本配置文件（开发和生产环境公用部分）
   const CopyWebpackPlugin = require(‘copy-webpack-plugin’)
   // html-webpack-plugin用于将webpack编译打包后的产品文件注入到html模板中
   // 即在index.html里面加上和

9 .编码规范.editorconfig （自定义）

root = true

[*]    // 对所有文件应用下面的规则
charset = utf-8                    // 编码规则用utf-8
indent_style = space               // 缩进用空格
indent_size = 2                    // 缩进数量为2个空格
end_of_line = lf                   // 换行符格式
insert_final_newline = true        // 是否在文件的最后插入一个空行
trim_trailing_whitespace = true    // 是否删除行尾的空格123456789

10 .src/app.vue文件解读

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</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>

看下模板：

<template></template> 标签包裹的内容：这是模板的HTMLDom结构 
<script></script>     标签包括的js内容：你可以在这里写一些页面的js的逻辑代码。 
<style></style>       标签包裹的css内容：页面需要的CSS样式。

11. src/router/index.js 路由文件

    import Vue from ‘vue’
    import Router from ‘vue-router’
    import Hello from ‘@/components/Hello’

    Vue.use(Router)

    export default new Router({
    routes: [//配置路由
    {
    path: ‘/’, //访问路径
    name: ‘Hello’, //路由名称
    component: Hello //路由需要的组件（驼峰式命名）
    }
    ]