vue官方vue-cli构建的vue项目结构分析

一、概要

vue现在在很多公司会大量使用，研究一下vue-cli脚手架构建项目的项目结构，有助于理解vue。

博客首发地址：https://www.mwcxs.top/page/570.html

使用vue-cli脚手架搭建vue项目的具体步骤如下：

npm install -g vue-cli
cd E:(跳转到项目目录)
vue init webpack vueproject (vueproject 为项目目录名称，可行更改)
cd vueproject
npm install
npm run dev

 

二、具体分析

2.1package.json文件

1、script字段

  "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",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },

项目开发周期主要执行的两个任务分别是开发环境npm run dev和打包任务npm run build,script字段是用来指定npm相关命令的缩写的

npm run dev 其实执行的是

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

利用 webpack-dev-server 读取 webpack.dev.conf.js 信息并启动一个本地服务器，这应该也是新版本vue-cli的新特性。

以前老的项目是使用node的express开启一个本地服务器。 

2、dependencies和devDependencies字段

dependencies字段指定了项目运行时所依赖的模块；

devDependencies字段是指定了项目开发时候所依赖的模块。

项目开发应使用的命令管理package.json文件：

npm i --save vue      //自动写入到dependencies字段中
npm i --save-dev babel-core        //自动写入到devDependencies字段

3、engines和browerslist字段

 "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

engines字段表示项目运行的所依赖的node以及npm的版本号；

browserslist表示项目的浏览器支持情况。

 

 

2.2build文件夹

1、基础配置文件 webpack.base.conf.js 

基础的webpack配置文件主要根据模式（开发，线上等）定义了入口和出口，以及处理vue，babel等的各种模块，是最基础的部分。其他模式（开发，线上等）的配置文件是以base为基础通过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 = () => ({  //Eslint检查规则
  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, '../'),     //基础目录
  entry: {
    app: './src/main.js'   //入口文件
  },
  output: {
    path: config.build.assetsRoot,    //输出文件，默认为../dist
    filename: '[name].js',            //输出文件名称
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath   //生成模式publicpath
      : config.dev.assetsPublicPath     //开发模式
  },
  resolve: {     //解析确定的扩展名，方便模块导入
    extensions: ['.js', '.vue', '.json'],
    alias: {     //创建别名
      'vue$': 'vue/dist/vue.esm.js',        '@': resolve('src'),   //如‘@/components/helloWorld’    } },

module: {      //模块相关配置，包括loader，plugin等
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,     //vue要在babel之前
        loader: 'vue-loader',   //vue转成普通的html
        options: vueLoaderConfig   //可选项：vue-loader选项配置
      },
      {
        test: /\.js$/,    //babel
        loader: 'babel-loader',   //es6转es5 的loader
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {          //url-loader 文件大小低于指定的限制时，可返回DataURL，即base64
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,    //url-loader图片
        loader: 'url-loader',
        options: {         //兼容性问题需要将query换成options
          limit: 10000,    //默认没有限制
          name: utils.assetsPath('img/[name].[hash:7].[ext]')     //hash: 7da代表7位数的hash
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,       //url-loader音视频
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,     //url-loader 字体
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {    //是否polyfill或mock
    // 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',