vue脚手架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           // 项目基本信息

"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.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()})})

......module.export = { // 编译入口文件 entry: {}, // 编译输出路径 output: {}, // 一些解决方案配置 resolve: {}, resolveLoader: {}, module: {   // 各种不同类型文件加载器配置   loaders: {   ...   ...   // js文件用babel转码   {     test: //.js$/,     loader: 'babel',     include: projectRoot,     // 哪些文件不需要转码     exclude: /node_modules/   },   ...   ...   } }, // vue文件一些相关配置 vue: {}}

// 加载语义化版本测试库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)  ) }}...}

// 设定转码规则"presets": ["es2015", "stage-2"],// 转码的一些插件"plugins": ["transform-runtime"],"comments": false

root = true[*] // 对所有文件应用下面的规则charset = utf-8          // 编码规则用utf-8indent_style = space        // 缩进用空格indent_size = 2          // 缩进数量为2个空格end_of_line = lf          // 换行符格式insert_final_newline = true    // 是否在文件的最后插入一个空行trim_trailing_whitespace = true  // 是否删除行尾的空格