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 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
js 蒙版进度条(结合图片)
Mar 10 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 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取整的几种方式
2013/06/25 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
CSS常用网站布局实例
2008/04/03 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
vue中template的三种写法示例
2020/10/21 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python学习笔记(二)基础语法
2014/06/06 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
用python读取xlsx文件
2020/12/17 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
质量月活动策划方案
2014/03/10 职场文书
微电影大赛策划方案
2014/06/05 职场文书
鲁迅故居导游词
2015/02/05 职场文书
简历中自我评价范文
2015/03/11 职场文书