.babelrc文件

{

// 此项指明,转码的规则

"presets": [

// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码

["env", { "modules": false }],

// 下面这个是不同阶段出现的es语法,包含不同的转码插件

"stage-2"

],

// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译

"plugins": ["transform-runtime"],

// 下面指的是在生成的文件中,不产生注释

"comments": false,

// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置

"env": {

// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development

"test": {

"presets": ["env", "stage-2"],

// instanbul是一个用来测试转码后代码的工具

"plugins": ["istanbul"]

}

}

}

vue-cli build目录中的 utils.js 配置文件

此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader

// 引入nodejs路径模块

var path = require('path')

// 引入config目录下的index.js配置文件

var config = require('../config')

// 引入extract-text-webpack-plugin插件,用来将css提取到单独的css文件中

// 详情请看(1)

var ExtractTextPlugin = require('extract-text-webpack-plugin')

// exports其实就是一个对象,用来导出方法的最终还是使用module.exports,此处导出assetsPath

exports.assetsPath = function (_path) {

// 如果是生产环境assetsSubDirectory就是'static',否则还是'static',

var assetsSubDirectory = process.env.NODE_ENV === 'production'

? config.build.assetsSubDirectory

: config.dev.assetsSubDirectory

// path.join和path.posix.join的区别就是,前者返回的是完整的路径,后者返回的是完整路径的相对根路径

// 也就是说path.join的路径是C:a/a/b/xiangmu/b,那么path.posix.join就是b

return path.posix.join(assetsSubDirectory, _path)

// 所以这个方法的作用就是返回一个干净的相对根路径

}

// 下面是导出cssLoaders的相关配置

exports.cssLoaders = function (options) {

// options如果没值就是空对象

options = options || {}

// cssLoader的基本配置

var cssLoader = {

loader: 'css-loader',

options: {

// options是用来传递参数给loader的

// minimize表示压缩,如果是生产环境就压缩css代码

minimize: process.env.NODE_ENV === 'production',

// 是否开启cssmap,默认是false

sourceMap: options.sourceMap

}

}

// generate loader string to be used with extract text plugin

function generateLoaders (loader, loaderOptions) {

// 将上面的基础cssLoader配置放在一个数组里面

var loaders = [cssLoader]

// 如果该函数传递了单独的loader就加到这个loaders数组里面,这个loader可能是less,sass之类的

if (loader) {

loaders.push({

// 加载对应的loader

loader: loader + '-loader',

// Object.assign是es6的方法,主要用来合并对象的,浅拷贝

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

})

}

// Extract CSS when that option is specified

// (which is the case during production build)

// 注意这个extract是自定义的属性,可以定义在options里面,主要作用就是当配置为true就把文件单独提取,false表示不单独提取,这个可以在使用的时候单独配置,瞬间觉得vue作者好牛逼

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

// 上面这段代码就是用来返回最终读取和导入loader,来处理对应类型的文件

}

// https://vue-loader.vuejs.org/en/configurations/extract-css.html

return {

css: generateLoaders(), // css对应 vue-style-loader 和 css-loader

postcss: generateLoaders(), // postcss对应 vue-style-loader 和 css-loader

less: generateLoaders('less'), // less对应 vue-style-loader 和 less-loader

sass: generateLoaders('sass', { indentedSyntax: true }), // sass对应 vue-style-loader 和 sass-loader

scss: generateLoaders('sass'), // scss对应 vue-style-loader 和 sass-loader

stylus: generateLoaders('stylus'), // stylus对应 vue-style-loader 和 stylus-loader

styl: generateLoaders('stylus') // styl对应 vue-style-loader 和 styl-loader

}

}

// Generate loaders for standalone style files (outside of .vue)

// 下面这个主要处理import这种方式导入的文件类型的打包,上面的exports.cssLoaders是为这一步服务的

exports.styleLoaders = function (options) {

var output = []

// 下面就是生成的各种css文件的loader对象

var loaders = exports.cssLoaders(options)

for (var extension in loaders) {

// 把每一种文件的laoder都提取出来

var loader = loaders[extension]

output.push({

// 把最终的结果都push到output数组中,大事搞定

test: new RegExp('\\.' + extension + '$'),

use: loader

})

}

return output

}

vue-cli脚手架config目录下index.js配置文件

此配置文件是用来定义开发环境和生产环境中所需要的参数

// see http://vuejs-templates.github.io/webpack for documentation.

// path是node.js的路径模块,用来处理路径统一的问题

var path = require('path')

module.exports = {

// 下面是build也就是生产编译环境下的一些配置

build: {

// 导入prod.env.js配置文件,只要用来指定当前环境,详细见(1)

env: require('./prod.env'),

// 下面是相对路径的拼接,假如当前跟目录是config,那么下面配置的index属性的属性值就是dist/index.html

index: path.resolve(__dirname, '../dist/index.html'),

// 下面定义的是静态资源的根目录 也就是dist目录

assetsRoot: path.resolve(__dirname, '../dist'),

// 下面定义的是静态资源根目录的子目录static,也就是dist目录下面的static

assetsSubDirectory: 'static',

// 下面定义的是静态资源的公开路径,也就是真正的引用路径

assetsPublicPath: '/',

// 下面定义是否生成生产环境的sourcmap,sourcmap是用来debug编译后文件的,通过映射到编译前文件来实现

productionSourceMap: true,

// Gzip off by default as many popular static hosts such as

// Surge or Netlify already gzip all static assets for you.

// Before setting to `true`, make sure to:

// npm install --save-dev compression-webpack-plugin

// 下面是是否在生产环境中压缩代码,如果要压缩必须安装compression-webpack-plugin

productionGzip: false,

// 下面定义要压缩哪些类型的文件

productionGzipExtensions: ['js', 'css'],

// Run the build command with an extra argument to

// View the bundle analyzer report after build finishes:

// `npm run build --report`

// Set to `true` or `false` to always turn it on or off

// 下面是用来开启编译完成后的报告,可以通过设置值为true和false来开启或关闭

// 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量,可以自行设置

bundleAnalyzerReport: process.env.npm_config_report

},

dev: {

// 引入当前目录下的dev.env.js,用来指明开发环境,详见(2)

env: require('./dev.env'),

// 下面是dev-server的端口号,可以自行更改

port: 8080,

// 下面表示是否自定代开浏览器

autoOpenBrowser: true,

assetsSubDirectory: 'static',

assetsPublicPath: '/',

// 下面是代理表,作用是用来,建一个虚拟api服务器用来代理本机的请求,只能用于开发模式

// 详见(3)

proxyTable: {},

// CSS Sourcemaps off by default because relative paths are "buggy"

// with this option, according to the CSS-Loader README

// (https://github.com/webpack/css-loader#sourcemaps)

// In our experience, they generally work as expected,

// just be aware of this issue when enabling this option.

// 是否生成css,map文件,上面这段英文就是说使用这个cssmap可能存在问题,但是按照经验,问题不大,可以使用

// 给人觉得没必要用这个,css出了问题,直接控制台不就完事了

cssSourceMap: false

}

}

注释

(1)下面是prod.env.js的配置内容

module.exports = {

// 作用很明显,就是导出一个对象,NODE_ENV是一个环境变量,指定production环境

NODE_ENV: '"production"'

}

(2)下面是dev.env.js的配置内容

// 首先引入的是webpack的merge插件,该插件是用来合并对象,也就是配置文件用的,相同的选项会被覆盖,至于这里为什么多次一举,可能另有他图吧

var merge = require('webpack-merge')

// 导入prod.env.js配置文件

var prodEnv = require('./prod.env')

// 将两个配置对象合并,最终结果是 NODE_ENV: '"development"'

module.exports = merge(prodEnv, {

NODE_ENV: '"development"'

})

(3)下面是proxyTable的一般用法

vue-cli使用这个功能是借助http-proxy-middleware插件,一般解决跨域请求api

proxyTable: {

'/list': {

target: 'http://api.xxxxxxxx.com', -> 目标url地址

changeOrigin: true, -> 指示是否跨域

pathRewrite: {

'^/list': '/list' -> 可以使用 /list 等价于 api.xxxxxxxx.com/list

}

}

}

vue-cli脚手架每行注释的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  2. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  3. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  4. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  5. vue-cli脚手架每行注释--摘抄

    .babelrc文件 { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es ...

  6. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  7. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...

  8. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  9. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

随机推荐

  1. node.js express环境下中文需要注意的地方

    问题一: 最近在nuxt项目中开始着手把一些跨域的请求转移到express里,其实跟其他语言差不多,http对象发请求,接收请求都写得很顺畅.之前用的请求部分大多数是get请求,所以除了注意编码问题之 ...

  2. linux 命令学习(持续完善中...)

    linux 命令学习(持续完善中...) 主要是记录一些开发过程中用到的linux命令,慢慢补充 一.用户 1.添加用户: useradd 用户名 2.设置密码:passwd 用户名 ,然后按照提示输 ...

  3. A1009 Product of Polynomials (25)(25 分)

    A1009 Product of Polynomials (25)(25 分) This time, you are supposed to find A*B where A and B are tw ...

  4. Codeforces Round #464 (Div. 2) E. Maximize!

    题目链接:http://codeforces.com/contest/939/problem/E E. Maximize! time limit per test3 seconds memory li ...

  5. (洛谷)P1019 单词接龙

    题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙" ...

  6. 51nod_1154 回文串的划分

    说实话..最开始看这题感觉一定好难...好高大上...我的马拉车还不熟....这种..但是本着做不出来也要至少看看的心态,吧个题看完了..然后简单的想了想,好像是个挺直观的动态规划,因为看到数据几乎就 ...

  7. Diycode开源项目 搭建可以具有下拉刷新和上拉加载的Fragment

    1.效果预览 1.1.这个首页就是一个Fragment碎片,本文讲述的就是这个碎片的搭建方式. 下拉会有一个旋转的刷新圈,上拉会刷新数据. 1.2.整体结构 首先底层的是BaseFragment 然后 ...

  8. hdu5319 简单模拟

    题意很好懂,大致就是三种颜色,红和蓝一起会变绿,给个终态矩阵,问从原始状态到终态最少画几笔?  按一定规则画 思路就是记红为1,蓝为2,绿为3,先遍历绿色,针对每一块绿色进行删除,每找到一块绿色,首先 ...

  9. Redis实现之RDB持久化(一)

    RDB持久化 Redis是一个键值对数据库服务器,服务器中通常包含着任意个非空数据库,而每个非空数据库中又可以包含任意个键值对,为了方便起见,我们将服务器中的非空数据库以及它们的键值对统称为数据库状态 ...

  10. js 监听后退事件及跳转页面

    //直接跳转 window.location.href="b.html"; //返回上一级页面 window.history.back(-1); //返回下一级页面 window. ...