DDR爱好者之家 Design By 杰米
vue-cli的模板
- 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
该文件定义项目的编码规范,编辑器的行为会与.editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高,这在多人合作开发项目时十分有用而且必要。
root = true [*] // 对所有文件应用下面的规则 charset = utf-8 // 编码规则用utf-8 indent_style = space // 缩进用空格 indent_size = 2 // 缩进数量为2个空格 end_of_line = lf // 换行符格式 insert_final_newline = true // 是否在文件的最后插入一个空行 trim_trailing_whitespace = true // 是否删除行尾的空格
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]