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 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
七个很有意思的PHP函数
May 12 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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原理之异常机制深入分析
2010/08/08 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Python MD5文件生成码
2009/01/12 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Python 导入文件过程图解
2019/10/15 Python
Python更换pip源方法过程解析
2020/05/19 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
乡镇三项教育实施方案
2014/03/30 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
学术诚信承诺书
2014/05/26 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
实习单位鉴定意见
2015/06/04 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Spring中的@Transactional的工作原理
2022/06/05 Java/Android