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"]　测试插件：伊斯坦布尔覆盖率工具 } } }