vue webpack 包管理与配置项

2019-01-16  本文已影响20人  shmaur

vue-cli 构建项目,以下是 vue-cli 3 构建的基础模型:

{
  "name": "mypro",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.21"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

name : 项目名称也就是包名称,命名规则是
         1、名称必须小于或等于 214 个字符;
         2、名称不能以点或者下划线开头
         3、名称不能包含大写字母。
         4、名称最终会称为 URL 的一部分,命令行上面的参数和文件夹名称,所以不能包含任何非URL安全字符。
         名称可以选择以作用域为前缀,例如 @myorg/mypackage@ 开头是为了防止 npm 包名的冲突。使用作用域就不会。
version:项目版本,这个是必须的,名称和版本是作为项目的唯一标识。而且版本必须由 node-semver 解析,和 npm 捆绑在一起的。
private:如果需要在 npm 上发布,如果是免费用户,则必须为 false,不然 npm会拒绝发布;不过可以通过付费进行发布。
scripts:生成脚本,在这里写的内容会以终端的形式运行,也就是说自动化脚本也可以在这里书写。
dependencies:生产需要的依赖;
devDependencies:开发的依赖
browserslist:第三方插件配置
"> 1%", // 表示包含所有使用率 > 1% 的浏览器
"last 2 versions", // 表示包含浏览器最新的两个版本
"not ie <= 8" // 表示不包含 ie8 及以下版本
         这里面衡量浏览器的使用率和版本数据来源 Can I Use,可以访问browserl.ist/ 去搜索配置项所包含的浏览器列表,例:last 2 versions

详细的 package.json 文件配置项介绍可以参考:package.json

常用 npm 命令:

npm init 
//只生成package.json文件(需要手动进行配置)
npm init -y
 //只生成 package.json 文件(但是会使用默认的配置)
npm i 
// 一键安装package.json 中的所有依赖
npm i xxx 
// 在项目中安装指定的依赖包(但是只是下载,不会添加到 package.json 中)
npm i xxx --save 
// 在项目中安装指定的依赖包(这里下载好后会自动添加到 package.json 中的 dependencies 下) 生产依赖
npm i xxx --save-dev 
// 在项目中安装指定的依赖包(这里下载好后会自动添加到 package.json 中的 devDependencies 下) 开发依赖
npm i -g xxx
// 全局安装指定的包
npm run xxx 
// 运行 package.json 中的 script 中的命令

vue-cli 3 的文档:传送门

上一篇下一篇

猜你喜欢

热点阅读