1.何为vue-cli

简单来说就是Vue搭建的架子

API：https://github.com/vuejs/vue-cli

2.安装

全局安装vue-cli

npm isntall -g vue-cli

3.初始化创建项目

vue init <template-name> <project-name>

  • template-name为模板的名称：

    官方模板：webpack ，webpack-simple， browserify，browserify-simple，pwa，simple
    淡然也可以安装自己的模板：
    vue init username/repo my-project
    Where username/repo is the GitHub repo shorthand for your fork.

  • project-name 为自己项目的名字

注意：node版本要在4以上

我们使用的是webpack创建

npm install webpack vue-demo

输入命令后会询问我们几个简单的选项，大家根据具体需要创建
这里写图片描述

  1. Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
  2. Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
  3. Author：作者，如果你有配置git的作者，他会读取。
  4. Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
  5. Use ESLint to lint your code?
    是否用ESLint来限制你的代码错误和风格。我们选择yes。
  6. setup unit tests with Karma + Mocha?
    是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
  7. Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
  8. 问你是否直接 npm install 安装插件（以前版本的是没有这一项的，需要自己手动install）

完成后进入项目目录

cd vue-demo

给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。

npm run dev

3.项目结构的讲解

3.1整体结构

|-- build                            // 项目构建(webpack)相关代码，表示打包的配置文件的文件夹
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本(因为对此有要求)
|   |-- dev-client.js                // 热重载相关 (新版的已经没有该文件)
|   |-- dev-server.js                // 构建本地服务器 (新版的已经没有该文件)
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // vue-loader配置相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // webpack的相关配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量（新版没有）
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|   |-- router                       //路由配置
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息
|--.eslintignore                     //eslint的代码检查的忽略文件
|--.eslintrc.js                      //eslint的配置文件

3.2 webpack重要文件的讲解

package.json

{
    .....
    //定义了你可以用npm run [name]运行的命令
     "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js"
      },
      //项目运行时所依赖的模块
      "dependencies":{
          ...
      }
      //项目开发时所依赖的模块
      "devDependencies": {
         ...
      }
      // 声明项目需要的node或npm版本范围
      "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      //对浏览器的要求
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
 }

vue-cli中webpack的相关配置

其实重要的是 build文件夹和 config文件夹，config文件夹中的内容更像是将一些变量单独列出来的文件夹，特别是他下面的index.js,本来config文件夹下的文件可以和webpack.base.config.js放在一起的，但是为了更加的清晰，所以就分开了。。

build / build.js

构建生产版本，或者说是打生产的包，我们可以看根目录的package.json 中npm run build 运行的就是

node build/build.js

运行的就是build.js

'use strict'
//调用检测版本的文件，因为使用node和npm版本需要求的，因为check-versions.js是exports出一个函数，所以可以直接（）调用
require('./check-versions')()

//全局环境变量的设置  因为bundle.js是打的生成包,所以参数是production
process.env.NODE_ENV = 'production'
// loading 插件，可以在npm run build时看到loading
const ora = require('ora')
//删除命令，每次打包前会将上次打包的文件删除
const rm = require('rimraf')
//node.js中自带的文件路径工具
const path = require('path')
//在命令行中输出带颜色的文字
const chalk = require('chalk')

const webpack = require('webpack')
//引入../config/index.js，也就是项目中的一些配置变量，只引入文件夹，是因为会自动去该文件夹下找index.js
const config = require('../config')
//引入生产包的配置
const webpackConfig = require('./webpack.prod.conf')

//日志输出插件，会在命令行中显示loading效果，并输出提示
const spinner = ora('building for production...')
spinner.start()

// 删除上次编译生成过的文件（递归删除）
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  //在删除完成的回调函数中开始编译    因为基本的webpack是有‘webpack’这个命令的，会自动去找根目录下的webpck.config.js,而我们不是用的webpck.config.js，使用的是webpack的回调函数打包
  webpack(webpackConfig, (err, stats) => {
     // 在编译完成的回调函数中,在终端输出编译的文件
    process.stdout.write(stats.toString({
        ...
    }）
    ...
  })
})
build / utils.js

utils.js包含了三(四)个工具函数：

  1. 生成静态资源的路径(根据开发环境还是正式环境配置不同的路径)
  2. css-loader配置，生成 ExtractTextPlugin对象(生成独立的css文件)或loader字符串
  3. 生成 style-loader的配置
  4. Node.js发送跨平台原生通知 （新版的有，老的没有）
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

exports.assetsPath = function (_path) {
}

exports.cssLoaders = function (options) {
}


exports.styleLoaders = function (options) {
}

exports.createNotifierCallback = () => {
}
build / webpack.base.conf.js

这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。可以说，这个文件相当重要。

// node自带的文件路径工具
var path = require('path')
// 工具函数集合
var utils = require('./utils')
  // 引用配置文件，config文件夹下的index.js
var config = require('../config')
  // 工具函数集合
var vueLoaderConfig = require('./vue-loader.conf')

//这个函数是说目录回退到该文件绝对路径的上一级，也就是根目录下
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    // 编译输出的静态资源根路径，可以在config文件夹下的index.js下build函数中看到，会生成dist文件夹
    path: config.build.assetsRoot,
    // 编译输出的文件名
    filename: '[name].js',
    // 正式发布环境下编译输出的上线路径的根路径
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
  },

  //关于我们在代码中require或者import文件的相关配置
  resolve: {
    //可以省略后缀的文件（可以自动补全后缀名）
    extensions: ['.js', '.vue', '.json'],
    //提供一些别名，例如在router.js中的引入
    alias: {
      // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [{
        // 审查 js 和 vue 文件
        // https://github.com/MoOx/eslint-loader
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        // 表示预先处理
        enforce: "pre",
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        // 处理 vue文件
        // https://github.com/vuejs/vue-loader
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        // 编译 js
        // https://github.com/babel/babel-loader
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        // 处理图片文件
        // https://github.com/webpack-contrib/url-loader
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        // 处理字体文件
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}
build / webpack.dev.conf.js

该文件是开发环境中webpack的配置入口。

'use strict'
//工具方法
const utils = require('./utils')
const webpack = require('webpack')
//引入../config/index.js
const config = require('../config')
//合并配置文件，用来和webpack.base.config.js合并
const merge = require('webpack-merge')
const path = require('path')

const baseWebpackConfig = require('./webpack.base.conf')
//复制Webpack插件，将单个文件或整个目录复制到构建目录
const CopyWebpackPlugin = require('copy-webpack-plugin')
  // 自动生成 html 并且注入到 .html 文件中的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
 // webpack错误信息提示插件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// 一个简单的工具，查找当前机器上的开放端口
const portfinder = require('portfinder')

//设置开发环境的的ip地址和端口
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

//dev的设置，将webpack-base.config和下面的合并
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
      // //对独立的css或者less，scss文件进行编译
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },

  // dev环境使用cheap-module-eval-source-map代码调试用的
  devtool: config.dev.devtool,

  // 使用webpack-dev-server    相关配置在 ../config/index.js
  devServer: {
  },

  plugins: [
    //config.dev.env展示的是"development"，我们可以根据这个字段做一些操作,例如dev环境资源的配置  
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),

    //使用热加载插件
    new webpack.HotModuleReplacementPlugin(),

    //当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境
    new webpack.NamedModulesPlugin(), 

    //则启用此插件后，编译时发生错误，webpack进程将不会退出并显示错误代码
    new webpack.NoEmitOnErrorsPlugin(),

    //html插件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

    // 将单个文件或整个目录复制到构建目录
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

//将dev环境的config输出
module.exports = new Promise((resolve, reject) => {
})
build / webpack.prod.conf.js
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')

//引入../config/index.js
const config = require('../config')

//文件的合并，可以继承webpack.base.config.js
const merge = require('webpack-merge')

//引入webpack.base.conf.js
const baseWebpackConfig = require('./webpack.base.conf')

//复制Webpack插件，将单个文件或整个目录复制到构建目录
const CopyWebpackPlugin = require('copy-webpack-plugin')

//html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// webpack提供的插件，将css提取出来生成单独文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')

//压缩css
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

//压缩js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

//将env 设置为production
const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    //使用styleLoader
    rules: utils.styleLoaders({
      //使用开发工具sourceMap，因为引入../config/index.js，该文件中 build下的productionSourceMap: true,
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  // 生产环境中的#sourceMap开启
  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    //定义环境变量   这里是生产的环境变量，所以生产的文件都会以生产的路径为前缀
    new webpack.DefinePlugin({
      'process.env': env
    }),

    //压缩js
    new UglifyJsPlugin({
      ...
    }),

    //分离css到单独的文件
    new ExtractTextPlugin({
     ...
    }),

    //压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)
    new OptimizeCSSPlugin({
      ...
    }),

    // html插件
    new HtmlWebpackPlugin({
     ...
    }),

    //这个插件将使得哈希基于模块的相对路径，生成一个四个字符的字符串作为模块ID,这里使用是为了当供应商模块不变时ID不变
    new webpack.HashedModuleIdsPlugin(),

    //此插件仅适用于由webpack直接处理的ES6模块。使得各个模块起到串联的作用，浏览器可以更快的解析
    new webpack.optimize.ModuleConcatenationPlugin(),

    // 将通用模块与捆绑分离，可以将最终的分块文件初始化一次，然后将其存储在缓存中供以后使用。
    //这会导致页速率优化，因为浏览器可以快速提供缓存中的共享代码，而不必在访问新页面时强制加载更大的包。
    new webpack.optimize.CommonsChunkPlugin({
     ...
    }),


   //复制Webpack插件，将单个文件或整个目录复制到构建目录
    new CopyWebpackPlugin([
      ...
    ])
  ]
})

//开启 gzip 的情况时，给 webpack plugins添加 compression-webpack-plugin 插件
if (config.build.productionGzip) {
 ...
}

//开启包分析的情况时， 给 webpack plugins添加 webpack-bundle-analyzer 插件
if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig
config / dev.env.js

其实就是输出开发环境变量 

    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"'
    })
config / pro.env.js

输出正式环境变量

    module.exports = {
      NODE_ENV: '"production"'
    }
config / index.js

就是一些开发或者正式环境的配置

var path = require('path')

module.exports = {

  // production 生产环境
  build: {
    // 构建环境
    env: require('./prod.env'),
    // 构建输出的index.html文件
    index: path.resolve(__dirname, '../dist/index.html'),
    // 构建输出的静态资源路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 构建输出的二级目录
    assetsSubDirectory: 'static',
    // 构建发布的根目录，可配置为资源服务器域名或 CDN 域名
    assetsPublicPath: '/',
    // 是否开启 cssSourceMap
    productionSourceMap: true,
    // 默认关闭 gzip，因为很多流行的静态资源主机，例如 Surge、Netlify，已经为所有静态资源开启gzip
    productionGzip: false,
    // 需要使用 gzip 压缩的文件扩展名
    productionGzipExtensions: ['js', 'css'],   
    // 运行“build”命令行时，加上一个参数，可以在构建完成后参看包分析报告
    // true为开启，false为关闭
    bundleAnalyzerReport: process.env.npm_config_report
  },

  // dev 开发环境
  dev: {
    // 构建环境
    env: require('./dev.env'),
    // 端口号
    port: 3333,
    // 是否自动打开浏览器
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    assetsPublicPath: '/',
    // proxyTable 代理的接口（可跨域）
    // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
    proxyTable: {},
    // 默认情况下，关闭 CSS Sourcemaps，因为使用相对路径会报错。
    // CSS-Loader README：https://github.com/webpack/css-loader#sourcemaps
    cssSourceMap: false
  }
}

3.3运行流程

3.3.1开发环境

这里写图片描述

首先npm run dev
这是因为package.json 中的设置 “dev”: “webpack-dev-server –inline –progress –config build/webpack.dev.conf.js”,

  • webpack-dev-server ：

  • –inline

  • –progress
  • –config build/webpack.dev.conf.js ：运行build/webpack.dev.conf.js

接着运行build/webpack.dev.conf.js
build/webpack.dev.conf.js主要是开发环境中 webpack的一些基本配置，

  • 引入了build / webpack.base.config.js 开发环境和正式环境都需要的webpack的配置，
  • 引入config/index.js 存储开发环境和正式环境中配置webpake所需要的一些变量的值
  • 引入config/dev.env.js 主要获取 ‘development’ 这个值，来配置的路径

运行build / webpack.base.config.js
开发环境和正式环境都需要的webpack的配置

  • 引入config/index.js 存储开发环境和正式环境中配置webpake所需要的一些变量的值

3.3.2正式环境

这里写图片描述

首先npm run build
同样是因为pakeage.json中 “build”: “node build/build.js”
在你的项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。
运行 build/build.js
打包编译时候的一些配置

  • 引入./webpack.prod.config.js 正式环境需要的webpack的配置

  • 引入config/index.js 存储开发环境和正式环境中配置webpake所需要的一些变量的值

运行webpack.prod.config.js
正式环境需要的webpack的配置

  • 引入了build / webpack.base.config.js 开发环境和正式环境都需要的webpack的配置，
  • 引入config/index.js 存储开发环境和正式环境中配置webpake所需要的一些变量的值
  • 引入config/pro.env.js 主要获取 ‘production’ 这个值，来配置的路径
# webpack
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue