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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
工作中常用js功能汇总
Nov 07 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
thinkphp分页集成实例
2017/07/24 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
javascript event 事件解析
2011/01/31 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python中logging包的使用总结
2018/02/28 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python实现合并两个排序的链表
2019/03/03 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
财务会计毕业生自荐信
2013/11/02 职场文书
数学专业推荐信范文
2013/11/21 职场文书
实习生个人的自我评价
2013/12/08 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis
使用Django框架创建项目
2022/06/10 Python