创建Vue选项介绍及vue目录详解（webpack）

最新推荐文章于 2024-05-13 11:14:34 发布

码上登堂

最新推荐文章于 2024-05-13 11:14:34 发布

阅读量433

点赞数

分类专栏： vue项目 webpack 文章标签： vue相关文件解析

本文链接：https://blog.csdn.net/weixin_44675537/article/details/97884448

版权

webpack 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue项目

2 篇文章 0 订阅

订阅专栏

postcss.js == > 兼容处理，根据不同的浏览器进行设置不同的css前缀（prefix），我们还需要指定一个浏览器兼容表，就能实现自动加前缀。运行 npm i postcss-loader autoprefixer -D 命令
.browserlistrc == > 浏览器兼容表，例如：1% in CN
android >= 4.4
ios >= 8
not ie <= 11

使用 npx browserslist 可以查看配置的适合的浏览器

完整清单

启动前端项目的项目

您可以通过查询指定浏览器和Node.js版本（不区分大小写）：

> 5%：全球使用情况统计选择的浏览器版本。 >=，<也<=工作。
> 5% in US：使用美国使用情况统计。它接受两个字母的国家/地区代码。
> 5% in alt-AS：使用亚洲地区使用情况统计。可在以下位置找到所有地区代码的列表caniuse-lite/data/regions。
> 5% in my stats：使用自定义使用数据。
cover 99.5%：提供覆盖的最流行的浏览器。
cover 99.5% in US：与上述相同，使用双字母国家代码。
cover 99.5% in my stats：使用自定义使用数据。
maintained node versions：所有Node.js版本，仍由 Node.js Foundation 维护。
node 10和node 10.4：选择最新的Node.js 10.x.x 或10.4.x发布。
current node：Browserslist目前使用的Node.js版本。
extends browserslist-config-mycompany：从browserslist-config-mycompanynpm包中获取查询。
ie 6-8：选择包含范围的版本。
Firefox > 20：Firefox的版本比20更新 >=，<并且也可以<=工作。
iOS 7：iOS浏览器版本7直接。
Firefox ESR：最新的[Firefox ESR]版本。
unreleased versions或unreleased Chrome versions：alpha和beta版本。
last 2 major versions或last 2 iOS major versions：最近2个主要版本的所有次要/补丁版本。
since 2015或last 2 years：自2015年以来发布的所有版本（也since 2015-03和since 2015-03-10）。
dead：来自last 2 version查询的浏览器，但全球使用统计数据少于0.5％，且24个月内没有官方支持或更新。现在是IE 10，IE_Mob 10，BlackBerry 10， BlackBerry 7，和OperaMobile 12.1。
last 2 versions：每个浏览器的最后两个版本。
last 2 Chrome versions：Chrome浏览器的最后两个版本。
defaults：Browserslist的默认浏览器（> 0.5%, last 2 versions, Firefox ESR, not dead）。
not ie <= 8：排除先前查询选择的浏览器

3.editorconfig ==> 是帮助协助开发者定义或者维护代码风格的（行尾缩进，单双引号等）工具参考：editorconfig.org/

4.eslintrc.js ==> 代码规则制定

5.gitignore == > 在该文件中定义相应的忽略规则，来管理当前文件夹下的文件的Git提交行为。定义之后保证被定义的文件不会被提交

6.babel.config.js == > babel是JavaScript的高级编辑语言转换器 babel.config.js是他的配置文件

7.vue.config.js ==> 当我们需要和后台分离部署的时候，必须配置config/index.js:

module.exports = {
 // 基本路径
 baseUrl: '/',
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置项
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相关配置
 css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: true,
  // 开启 CSS source maps?
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {},
  // 启用 CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否启用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, // 设置代理
  before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
}

// 项目中配置的config/index.js，有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解

var path = require('path')
 2 
 3 module.exports = {
 4   build: { // production 环境
 5     env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
 6     index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
 7     assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
 8     assetsSubDirectory: 'static', // 编译输出的二级目录
 9     assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
10     productionSourceMap: true, // 是否开启 cssSourceMap
11     // Gzip off by default as many popular static hosts such as
12     // Surge or Netlify already gzip all static assets for you.
13     // Before setting to `true`, make sure to:
14     // npm install --save-dev compression-webpack-plugin
15     productionGzip: false, // 是否开启 gzip
16     productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
17   },
18   dev: { // dev 环境
19     env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
20     port: 8080, // 运行测试页面的端口
21     assetsSubDirectory: 'static', // 编译输出的二级目录
22     assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
23     proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域）
24     // CSS Sourcemaps off by default because relative paths are "buggy"
25     // with this option, according to the CSS-Loader README
26     // (https://github.com/webpack/css-loader#sourcemaps)
27     // In our experience, they generally work as expected,
28     // just be aware of this issue when enabling this option.
29     cssSourceMap: false // 是否开启 cssSourceMap
30   }
31 }

8.关于process.env ==> 在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。

在package.json配置文件中，在进行打包运行时

 "scripts": {
    "pre": "yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
    "dev": "vue-cli-service serve",   // 使用npm run dev 是运行的是开发环境
    "build": "vue-cli-service build",  // 使用npm run build 是运行的是生产环境
    "lint": "vue-cli-service lint"
  },



//这样配置完成后，为了验证一下是否是全局变量，运行npm run dev 打包后，我们可以在我们项目中入口js文件，打印下即可：比如如下代码：
在main.js中打印 可以输出对应的环境
console.log(process.env); // 打印 { NODE_ENV: undefined }

创建Vue时的选项介绍：

选择Manually select features，表示我们不采用默认的模版，而是根据自己的情况选择需要安装的模块，例如vue-router，ESLint等等。

Babel：给我们提供了能够使用ES6的条件，Babel将我们的ES6代码转换成浏览器兼容性更强的ES5，这意味着，你可以现在就用ES6 编写程序，而不用担心现有环境是否支持，基本上现在的项目都会选择它；

Router：这里的Router指的是vue-router，属于vue全家桶的一项，我们用它主要是帮助我们实现单页应用的页面路由；

Vuex：Vuex 是专门为 Vue.js 设计的状态管理库，它采用集中式存储管理应用的所有组件的状态，同时利用Vuex可以实现跨组件的通信。

CSS Pre-processors：CSS的预处理工具选择，例如Sass Less stylus ，同时默认会集成PostCss，PostCss和他们的区别在于：PostCss是将最后生成的CSS进行处理，包括补充和提供一些而外的功能，比较典型的功能是将我们的CSS样式添加上不同浏览器的前缀例如：autoprefixer。另外三者称为CSS预处理工具，强调的是提供一些API，让我们编写CSS样式时更加具有代码逻辑，使我们的CSS更加有组织性，例如可以定义变量等等。

Linter/Formatter：代码规范工具选择，现在主要用的就是ESLint，来帮我们处理代码规范问题。

创建项目的最后一步会看到我们选择的模块清单，这里解释几个地方：

history mode：是 vue-router 的路由模式，我们并没有选择 history，而是选择了默认的hash，这样我们可以在url里清晰的看到页面的参数和当前的路径，更加清晰。

**where do you prefer placing config for babel…**有两个参数：

In dedicated config files：单独创建Bable，ESlint的配置文件。

In package.json：将Bable，ESlint这些配置文件继承在package.json里。

在项目中我们一般选择单独配置文件In dedicated config files

码上登堂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
创建Vue选项介绍及vue目录详解（webpack）

postcss.js == > 兼容处理，根据不同的浏览器进行设置不同的css前缀（prefix），我们还需要指定一个浏览器兼容表，就能实现自动加前缀。运行npm i postcss-loader autoprefixer -D 命令 .browserlistrc == > 浏览器兼容表，例如：1% in CN android >= 4.4 ios >= ...
复制链接

扫一扫