vue-cli项目结构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//一些项目配置变量||--产品环境。js//生产环境变量||--test.env.js//测试环境变量|--src//源代码目录||--组件//vue公共组件||--store//vuex的状态管理||--App.vue//页面入口文件||--main.js//程序入口文件，加载各种公共组件|--static//静态文件，比如一些图片，json数据等||--data//群聊分析得到的数据，用于数据可视化|--.babelrc//ES6语法编译配置|--.editorconfig//定义代码格式|--.gitignore//需要忽略的文件格式forgitupload|--README.md//项目描述|--favicon.ico|--index.html//入口页面|--package.json//项目基本信息重要文件说明：1.package.jsonpackage.json文件是项目根目录下的一个文件，它定义了项目开发需要的各种模块和一些项目配置信息。在项目根目录下运行npmi可以安装所需的依赖包。里面的scripts字段定义了可以快速使用npm命令代替繁琐的命令执行文件，其中npmrundev相当于执行nodebuild/dev-server.js是打开一个node写的开发线建议服务器，就是相关命令的缩写。"scripts":{"dev":"nodebuild/dev-server.js","build":"nodebuild/build.js"}dependencies字段：项目所依赖的模块；devDependencies字段：指定项目开发所依赖的模块；2.webpackdev-server.js//检查Node和npm版本require('./check-versions')()//获取config/index.js的默认配置varconfig=require('../config')//如果无法判断Node环境为当前dev/product环境//使用config.dev.env.NODE_ENV作为当前环境if(!process.env.NODE_ENV)process.环境。NODE_ENV=JSON.parse(config.dev.env.NODE_ENV)//使用NodeJS自带的文件路径工具varpath=require('path')//使用expressvarexpress=require('express')//使用webpackvarwebpack=require('webpack')//一个可以强制浏览器打开并跳转到指定url的插件varopn=require('opn')//使用proxyTablevarproxyMiddleware=require('http-proxy-middleware')//使用dev环境的webpack配置varwebpackConfig=require('./webpack.dev.conf')//devserver监听传入流量的默认端口//如果不指定运行端口，则使用config.dev.port作为运行端口varport=process.env.PORT||config.dev.port//将HTTP代理定义到您的自定义API后端//https://github.com/chimurai/http-proxy-middleware//使用config.dev.proxyTable将代理配置配置为proxyTablevarproxyTable=config.dev.proxyTable//使用express启动服务varapp=express()//启动webpack编译varcompiler=webpack(webpackConfig)//启动webpack-dev-middleware，将编译后的文件暂存在内存中vardevMiddleware=require('webpack-dev-middleware')(compiler,{publicPath:webpackConfig.output.publicPath,stats:{colors:true,chunks:false}})//开始webpack-hot-middleware，也就是我们常说的Hot-reloadvarhotMiddleware=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()})})//代理apirequests//将proxyTable中的请求配置挂到启动的express服务上{target:options}}app.use(proxyMiddleware(context,options))})//handlefallbackforHTML5historyAPI//使用connect-history-api-fallback匹配资源，如果没有可以重定向到指定地址app.use(require('connect-history-api-fallback')())//servewebpackbundleoutput//将编译好的webpack文件暂存在内存中挂在express上serviceapp.use(hotMiddleware)//servepurestaticassets//拼接静态文件夹的静态资源路径varstaticPath=path.posix.join(config.dev.assetsPublicPath,config.dev.assetsSubDirectory)//提供响应serviceforstaticresourcesapp.use(staticPath,express.static('./static'))//让我们的express服务监听端口请求，并将这个服务暴露为dev-server.js的一个接口module.exports=app.listen(port,function(err){if(err){console.log(err)return}varuri='http://localhost:'+portconsole.log('监听'+uri+'\n')//env在测试时，不需要打开//如果不是测试环境，自动打开浏览器跳转到我们的开发地址if(process.env.NODE_ENV!=='testing'){opn(uri)}})webpack.base.config.js：webpack的基础配置文件。babelrc：Babel解释器的配置文件，存放在根目录下，Babel是转码器，需要在项目中使用它将ES6代码转换为ES5代码。详细代码解释请参考页面底部的参考地址....editorconfig：该文件定义了项目的编码标准，编译器的行为将与.editorconfig相同g文件中的定义是一致的，其优先级高于编译器自己的设置，这在多人合作开发项目时非常有用和必要。npmrunbuild命令将写好的网页放到服务器上。运行命令后，vue-cli会自动打包项目，生成dist文件夹。这个文件夹就是我们要上传到server.main.js文件的文件main.js是整个项目的入口文件，位于src文件夹下vue.config.productionTip=false//提示生产环境，这里设置为false，这里最奇怪的文件就是这句话，其他的都是vue.js，ES6的写法就不多说了。还有通过importAppfrom'./App'引入App组件。app.vue文件
