vue-cli的脚手架项目模板有webpack-simple 和 webpack
两种的区别在于webpack-simple 没有包括Eslint 检查等功能
vue-cli的项目结构
. |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js // 构建本地服务器 | |-- utils.js // 构建工具相关 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js // 测试环境变量 |-- src // 源码目录 | |-- components // vue公共组件 | |-- store // vuex的状态管理 | |-- App.vue // 页面入口文件 | |-- main.js // 程序入口文件，加载各种公共组件 |-- static // 静态文件，比如一些图片，json数据等 | |-- data // 群聊分析得到的数据用于数据可视化 |-- .babelrc // ES6语法编译配置 |-- .editorconfig // 定义代码格式 |-- .gitignore // git上传需要忽略的文件格式 |-- README.md // 项目说明 |-- favicon.ico |-- index.html // 入口页面 |-- package.json // 项目基本信息
package.json文件
package.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。
自定义npm相关命令
在package.json文件里有一个scripts字段。
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" }
在开发环境下，在命令行中运行npm run dev就相当于在执行node build/dev-server.js。所以script字段是用来指定npm相关命令的缩写的。
dependencies字段和devDependencies字段
dependencies字段指定了项目运行时所依赖的模块
devDependencies字段指定了项目开发时所依赖的模块(项目环境依赖)
在命令行中运行npm install命令，会自动安装dependencies和devDependencies字段中的模块。
webpack配置相关
详情在webpack相关博客
dev-server.js
... ... // http-proxy可以实现转发所有请求代理到后端真实API地址，以实现前后端开发完全分离 // 在config/index.js中可以对proxyTable想进行配置 var proxyMiddleware = require('http-proxy-middleware') ... ... // 热加载要使用webpack-dev-middleware在没有webpack-dev-server的时候进行热加载 var hotMiddleware = require('webpack-hot-middleware')(compiler) // 当html-webpack-plugin模板改变是强制进行页面重新加载 compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) })
webpack.base.conf.js
... ... module.export = { // 编译入口文件 entry: {}, // 编译输出路径 output: {}, // 一些解决方案配置 resolve: {}, resolveLoader: {}, module: { // 各种不同类型文件加载器配置 loaders: { ... ... // js文件用babel转码 { test: /\.js$/, loader: 'babel', include: projectRoot, // 哪些文件不需要转码 exclude: /node_modules/ }, ... ... } }, // vue文件一些相关配置 vue: {} }
check-version.js
这个文件主要是用来检测当前环境中的node和npm版本和我们需要的是否一致的。
// 加载语义化版本测试库 var semver = require('semver') // 定制控制台日志的输入样式 var chalk = require('chalk') // 引入package.json文件 var packageConfig = require('../package.json') var exec = function (cmd) { return require('child_process') .execSync(cmd).toString().trim() } // 定义node和npm版本需求所组成的数组 var versionRequirements = [ { name: 'node', currentVersion: semver.clean(process.version), versionRequirement: packageConfig.engines.node }, { name: 'npm', currentVersion: exec('npm --version'), versionRequirement: packageConfig.engines.npm } ] module.exports = function () { var warnings = [] // 依次判断版本是否符合要求 for (var i = 0; i < versionRequirements.length; i++) { var mod = versionRequirements[i] if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { warnings.push(mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement) ) } } ... }
.babelrc
Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码
// 设定转码规则 "presets": ["es2015", "stage-2"], // 转码的一些插件 "plugins": ["transform-runtime"], "comments": false
.editorconfig