vue脚手架vue-cli的学习使用教程


Posted in Javascript onJune 06, 2017

vue-cli的模板

  1. vue-cli的脚手架项目模板有webpack-simple 和 webpack
  2. 两种的区别在于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字段

  1. dependencies字段指定了项目运行时所依赖的模块
  2. devDependencies字段指定了项目开发时所依赖的模块(项目环境依赖)
  3. 在命令行中运行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  // 是否删除行尾的空格

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript操作excel生成报表示例
May 08 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
vue如何进行动画的封装
Sep 26 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 #Javascript
JavaScript实现移动端轮播效果
Jun 06 #Javascript
js评分组件使用详解
Jun 06 #Javascript
javascript中mouseenter与mouseover的异同
Jun 06 #Javascript
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
Node.js连接mongodb实例代码
Jun 06 #Javascript
jquery实现图片放大点击切换
Jun 06 #jQuery
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP技术开发技巧分享
2010/03/23 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
jquery移动节点实例
2015/01/14 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
Python的词法分析与语法分析
2013/05/18 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python如何使用代码运行助手
2020/07/03 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
化工专业个人的求职信范文
2013/11/28 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
体育口号大全
2014/06/18 职场文书
军人离婚协议书样本
2014/10/21 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
PHP命令行与定时任务
2021/04/01 PHP
人民币符号
2022/02/17 杂记
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL