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 相关文章推荐
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
iScroll.js 使用方法参考
May 16 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
js实现日历与定时器
2017/02/22 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Django实现基于类的分页功能
2019/10/31 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
国庆节主题班会
2015/08/15 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
Python 语言实现六大查找算法
2021/06/30 Python
python元组打包和解包过程详解
2021/08/02 Python