vue-cli详解

其他 2018-05-17 09:10:39 阅读次数: 5

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’ 这个值，来配置的路径

猜你喜欢

转载自blog.csdn.net/haochangdi123/article/details/80274210
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022