VUE init webpack,package.json简单说明

1、安装ｖｕｅ脚手架

npm [i|install] -g vue-cli

参数说明：

　ｉ：install 的简称

　－ｇ：全局目录下安装，可选参数，不加该参数时意为当前目录下安装

２、创建ＶＵＥ模板

vue init [webpack|webpack-simple] TargetFloder

参数说明：

init　：初始化模板

[webpack|webpack-simple] ：完全版本｜简单版本的　ｗｅｂｐａｃｋ模板

TargetFloder: 指定目录

３、安装依赖包

进入项目根目录

npm i

４、运行模式

npm run dev 开发模式

npm run start 部署模式

nom run build 打包模式

build 文件夹：打包用的文件夹

config：配置文件

src:开放项目的源码

APP.vue:入库组件

main.js:项目入口文件

static:静态文件

.babelrc:ES6编译器配置

.editorconfig：编辑器配置

.gitgnore:GIT 提交排除文件配置

.postcssrc.js:ＨＴＭＬ标签配置

index.html:单页面应用程序的入口页面

package.json:项目基础配置

package.json

项目基础配置

{ "name" : "imoocmall" , "version" : "1.0.0" , "description" : "imoocmall" , "author" : "amwukddx" , "private" : true , "scripts" : { "dev" : "node build/dev-server.js" , "start" : "node build/dev-server.js" , "build" : "node build/build.js" }, "dependencies" : { "vue" : "^2.4.2" , "vue-router" : "^2.7.0" }, "devDependencies" : { "autoprefixer" : "^7.1.2" , "babel-core" : "^6.22.1" , "babel-loader" : "^7.1.1" , "babel-plugin-transform-runtime" : "^6.22.0" , "babel-preset-env" : "^1.3.2" , "babel-preset-stage-2" : "^6.22.0" , "babel-register" : "^6.22.0" , "chalk" : "^2.0.1" , "connect-history-api-fallback" : "^1.3.0" , "copy-webpack-plugin" : "^4.0.1" , "css-loader" : "^0.28.0" , "cssnano" : "^3.10.0" , "eventsource-polyfill" : "^0.9.6" , "express" : "^4.14.1" , "extract-text-webpack-plugin" : "^2.0.0" , "file-loader" : "^0.11.1" , "friendly-errors-webpack-plugin" : "^1.1.3" , "html-webpack-plugin" : "^2.28.0" , "http-proxy-middleware" : "^0.17.3" , "webpack-bundle-analyzer" : "^2.2.1" , "semver" : "^5.3.0" , "shelljs" : "^0.7.6" , "opn" : "^5.1.0" , "optimize-css-assets-webpack-plugin" : "^2.0.0" , "ora" : "^1.2.0" , "rimraf" : "^2.6.0" , "url-loader" : "^0.5.8" , "vue-loader" : "^13.0.4" , "vue-style-loader" : "^3.0.1" , "vue-template-compiler" : "^2.4.2" , "webpack" : "^2.6.1" , "webpack-dev-middleware" : "^1.10.0" , "webpack-hot-middleware" : "^2.18.0" , "webpack-merge" : "^4.1.0" }, "engines" : { "node" : ">= 4.0.0" , "npm" : ">= 3.0.0" }, "browserslist" : [ "> 1%" , "last 2 versions" , "not ie <= 8" ] }

{ "name" : 项目名称 "version" : 版本好 "description" : 项目说明 "author" : 作者 "private" : 私有项目 , "scripts" : { "dev" : 开放模式时运行的脚本 , "start" : 部署模式时运行的脚本 "build" : 打包时运行的脚本 }, "dependencies" : { 开发原型 "vue" : 要求vue版本 "vue-router" : 要求vue路由的版本 }, "devDependencies" : { 辅助开发原型 "autoprefixer" : 多浏览器css前缀处理 , "babel-core" : ES6转ES5以实现当前浏览器中能以执行，配置文件 .babelrc "babel-loader" : ES6转译器 "babel-plugin-transform-runtime" : "^6.22.0" , "babel-preset-env" : "^1.3.2" , "babel-preset-stage-2" : "^6.22.0" , "babel-register" : "^6.22.0" , "chalk" : 彩色字体日志组件 , "connect-history-api-fallback" : html5旧版ＡＰＩ提供者（加入当前不支持的话） , "copy-webpack-plugin" : 拷贝ｗｅｂｐａｃｋ插件，webpack为模块打包机 "css-loader" : CSS转译器 "cssnano" : css打包 , "eventsource-polyfill" : IE8兼容性 , "express" : 用来创建Web应用案例 "extract-text-webpack-plugin" : 从js中抽了ｃｓｓ "file-loader" : 文件加载插件，一般用于图片加载 "friendly-errors-webpack-plugin" : 友好的webpack错误提示 , "html-webpack-plugin" : 简化创建服务于 webpack bundle 的 HTML 文件 "http-proxy-middleware" : http代理中间件 "webpack-bundle-analyzer" : webpack编译过程分析插件，用于分析编译过程的快慢问题 , "semver" : 版本号解析器，主要用于“语义化的版本控制”检查 , "shelljs" : 调用系统脚本插件 , "opn" : open插件，能打开一切可以打的资源（文件、网络资源） , "optimize-css-assets-webpack-plugin" : 最小化css资源 , "ora" : 终端美化 , "rimraf" : unix批量删除脚本插件 , "url-loader" : url加载器 "vue-loader" : ｖｕｅ加载器 , "vue-style-loader" : ｖｕｅ样式加载器 , "vue-template-compiler" : ｖｕｅ模板编译器 "webpack" : 网站应用模块打包器 "webpack-dev-middleware" : 网站应用模块打包器开发中间件 , "webpack-hot-middleware" : 网站应用模块打包器热加载中间件 , "webpack-merge" : 网站应用模块打包器合并 }, "engines" : { 引擎 "node" : node的最低版本要求 "npm" : npm的最低版本要求 }, "browserslist" : [ 被支持的浏览器列表 "> 1%" ,//非初始版本 "last 2 versions" ,//最新的稳定版本 "not ie <= 8" //IE 9+ ] }

.babelrc文件	ES6编译器配置
{ "presets" : [ [ "env" , { "modules" : false , "targets" : { "browsers" : [ "> 1%" , "last 2 versions" , "not ie <= 8" ] } }], "stage-2" ], "plugins" : [ "transform-runtime" ], "env" : { "test" : { "presets" : [ "env" , "stage-2" ], "plugins" : [ "istanbul" ] } } }	{ "presets" : [ 字段设定转码规则 [ "env" , {仅转译不支持的代码 "modules" : false ,组件 "targets" : {编译目标 "browsers" : [ "> 1%" , "last 2 versions" , "not ie <= 8" ]　可被支持的浏览器 } }], "stage-2"　 ES7不同阶段语法提案的转码规则，第三阶段 ], "plugins" : [ "transform-runtime" ],插件： 修正内置的垫片 "env" : { "test" : {测试设置 "presets" : [ "env" , "stage-2" ], "plugins" : [ "istanbul" ]　测试插件：伊斯坦布尔覆盖率工具 } } }