用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读。前提是你要会用基本的命令行、 Node 和 NPM,以及掌握 ES2015 的基础知识。本文都是在 macOS 环境下运行,要求使用 npm >= 3, node >= 4
的环境。我们会以 Vue 2.0 搭配 Webpack 2.0 作为教程。
写过 Vue 项目的同学或多或少都用过 vue-cli 来搭建 Vue + webpack 的项目。对于初学者来说,第一次生成这个项目后有所顾忌 —— 生成那么多 webpack 的配置文件到底 TM 是干嘛用的?
纯 webpack 搭建 Vue 项目确实需要许多配置去处理 vue 文件、CSS 预处理、静态资源、以及压缩、热替换等等内容。一开始接受不了这么多也很正常。其实很多时候这些 webpack 配置都可以标准化甚至封装起来,简化其配置。cooking 就是为我们做了这件事,有了它我们就可以很轻易搭建一个 Vue 项目的开发环境。下面我将一步步的教你从零开始搭建 Vue 项目。
创建一个空项目
没什么好说的,创建一个目录然后进入,然后初始化 git 和 npm,填一下相关信息。
mkdir my-vue && cd my-vue && git init && npm init
安装 cooking
如果不用 vue-cli 可能我们并不清楚搭建 Vue 环境需要哪些依赖。没关系,先安装 cooking 再说。
npm i cooking -D # i 是 install 的简写,-D 是 --dev-save 的简写
如果访问 NPM 较慢的话,安利下 python 发烧友写的 npminstall,简单用法如下,下面我将都是用 npminstall
替代 npm i
。
npm i npminstall -g --registry=https://registry.npm.taobao.org
# 然后就可以用它来安装依赖了
npminstall cooking -D
安装完 cooking 后会有提醒你安装一串依赖列表,这些也就是搭建一个最基础的前端开发环境会用到的东西:babel
处理 ES2015;postcss
、css-loader
、style-loader
处理 CSS 文件;html-webpack-plugin
用来生成 HTML 模板等等。当然这里暂时不用关心这些。我们只需要安装这些依赖即可。
├── UNMET PEER DEPENDENCY babel-core@^6.0.0
├── UNMET PEER DEPENDENCY babel-loader@^6.0.0
├── UNMET PEER DEPENDENCY css-loader@^0.24.0
├── UNMET PEER DEPENDENCY extract-text-webpack-plugin@^1.0.0 || ^2.0.0-beta
├── UNMET PEER DEPENDENCY file-loader@^0.9.0
├── UNMET PEER DEPENDENCY html-loader@^0.4.3
├── UNMET PEER DEPENDENCY html-webpack-plugin@^2.9.0
├── UNMET PEER DEPENDENCY json-loader@^0.5.4
├── UNMET PEER DEPENDENCY postcss@^5.1.0
├── UNMET PEER DEPENDENCY postcss-loader@^0.11.1
├── UNMET PEER DEPENDENCY style-loader@^0.13.1
├── UNMET PEER DEPENDENCY url-loader@^0.5.7
├── UNMET PEER DEPENDENCY webpack@^1.12.0 || ^2.1.0-beta
└── UNMET PEER DEPENDENCY webpack-dev-server@^1.14.0 || ^2.1.0-beta
这时候我们要做选择,是打算用 webpack 1 还是 2 搭建环境,两者 API 都些许变化、但是在 cooking 内部有做一些兼容处理,也就是说其实用 1 还是 2 我们要写的配置是一样的。
如果选择安装 webpack 1
那么就安装这些依赖:
npminstall babel-core babel-loader css-loader file-loader postcss postcss-loader\html-loader html-webpack-plugin json-loader style-loader url-loader\webpack@1 webpack-dev-server@1 extract-text-webpack-plugin@1 -D
如果是选择 webpack 2
,由于目前 webpack 2 还是 beta 版,因此可以这样安装:
npminstall babel-core babel-loader css-loader file-loader postcss postcss-loader\html-loader html-webpack-plugin json-loader style-loader url-loader\webpack@beta webpack-dev-server@beta extract-text-webpack-plugin@beta -D
开始写最简单的配置
基础的依赖安装完了,下面我们尝试下写一个最简单的配置,感受下 cooking
的用法。首先创建一个配置文件,命名叫做 cooking.conf.js
,然后用你喜欢的编辑器打开。写下如下内容。
// 引入 cooking 依赖
var cooking = require('cooking');// 调用 set 方法传入自定义配置
cooking.set({entry: './src/index.js', // 指定入口文件dist: './dist', // 设置打包后的文件目录hash: true, // 打包的文件是否带 hashsourceMap: true // 是否带 sourceMap
});// 生成 webpack 配置并导出
module.exports = cooking.resolve();
新建并配置一下 babel 的配置文件 —— .babelrc
,并且执行 npminstall babel-preset-es2015 -D
安装 preset-es2015。
{"presets": ["es2015"],"comments": false
}
然后创建一个 src/index.js
的入口文件,并随便写一些 ES2015 的代码,所以目前的目录结构为:
my-vue\src\index.jscooking.conf.js.babelrcpackage.json
为了方便调用 cooking 的命令行,我们在 package.json
里配置一条 cooking 的 script。
{"scripts": {"cooking": "cooking"}
}
运行一下 cooking build
。其中 -p
表示启动进度条。
npm run cooking build -- -p
最终,我们会得到一个 dist 目录,里面有一个压缩过的 app.[hash].js
文件。那么,如果换做传统 webpack 配置要如何写呢?
var webpack = require('webpack');module.export = {devtool: '#source-map',entry: './src/index.js',output: {path: './dist',filename: '[name].[hash:7].js'},module: {loaders: [{test: /\.(jsx?|babel|es6)$/,include: process.cwd(),exclude: /node_modules|bower_components/,loaders: ['babel-loader']}]},plugins: [new webpack.NoErrorsPlugin(),new webpack.optimize.UglifyJsPlugin({compress: {warnings: false},output: {comments: false},sourceMap: true})]
}
看到这里我们就明白了,cooking 能帮我们省去许多我们可以不用关心的可标准化的配置项,最终只需要简单的几行配置就完成同样的事情。
最基础的 Vue 项目的配置
有了前面的介绍,下面我们来写一份简单的 Vue 项目的配置。当然首先,你要安装一下 vue。
npm i vue@next -S
接下来我们在 src/index.js
文件里写下创建一个 Vue 实例的代码。
import Vue from 'vue'
import App from './app'new Vue({el: '#app',render: h => h(App)
})
然后创建 src/App.vue
文件。
<template><div><h1>Hello, {{ message }}</h1></div>
</template><script>
export default {data() {return {message: 'cooking'}}
}
</script><style lang="css" scoped>h1 {color: red;}
</style>
接着在根目录下创建一个 HTML 模板文件,命名为 index.html
。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"></div>
</body>
</html>
现在,我们需要搭建一个支持热替换、能处理 CSS 和 Vue 文件,并且能自动将打包的文件应用在 HTML 模板上的开发环境,来看看需要哪些配置。回到 cooking.conf.js
文件。
var cooking = require('cooking');cooking.set({entry: './src/index.js',dist: './dist',hash: true,sourceMap: true,template: './index.html', // 加载 index.html 模板devServer: { // 开启 webpack-dev-serverport: 8888, // 端口为 8888publicPath: '/' // 开启 dev-server 时默认打包的资源文件路径是和 index.html 同级的},extends: ['vue2'] // 加载 cooking-vue2,自动配置 Vue 2.0 相关内容
});module.exports = cooking.resolve();
只多了三行配置,当然内部做了很多事情。其中 cooking-vue2
是需要你单独安装的,执行下 npminstall cooking-vue2 -D
即可。如果你不安装会有错误提示。这时候我们开启动开发模式。
npm run cooking watch
# 打开 http://localhost:8888 访问
至此,一个简单的开发环境搭建完成。
增加 CSS 预处理
无论你倾向 Sass、Less 还是 PostCSS,都能很方便的配置。前两者直接在 extends
配置后安装对应的插件即可,例如配置 Sass,之后执行 npminstall cooking-sass -D
{extends: ['vue2', 'sass']
}
如果是用 PostCSS,只需将配置项配置到 postcss 属性上即可,接受数组和函数类型
{postcss: [require('postcss-salad')]
}
最后按照个人喜好更改配置
如果想提取 CSS 成单独的文件,或者要将公用文件提取出来(CommonChunk),亦或者想加入 eslint,在 cooking 里也是很简单就可做到,我们来大致补充一下,完成最终配置文件。
var cooking = require('cooking');cooking.set({entry: {app: './src/index.js',vendor: ['vue']},dist: './dist',clear: true, // 每次打包都清理掉 dist 目录hash: true,sourceMap: true,template: './index.html',devServer: { port: 8888, publicPath: '/' },postcss: [require('postcss-salad')],extractCSS: true, // 提取 CSS 文件chunk: ['vendor', // entry 里定义的入口文件,也就是会将 vue 单独打包'manifest' // 这个并没有在 entry 里声明的会将所有公用部分打包,也就是 webpack runtime],publicPath: '/dist/', // 打包后的资源文件相对于 url 的路径extends: ['vue2', 'lint'] // 安装 cooking-lint 并配置 '.eslintrc' 文件
});module.exports = cooking.resolve();
最后改一下 package.json
里的 scripts,方便调用。
"scripts": {"dev": "cooking watch","dist": "cooking build -p"
}
结尾
至此,一个简单优雅的 Vue 项目开发环境就搭建完成了。不过,其实还不够好,为什么我们要手动创建项目?为什么要去手动安装这么多依赖?为什么每个项目都要安装一对同样的依赖?那么我们将会在下一篇文章教你用 cooking-cli
来进一步提升开发体验,今天就这。
这个项目的源码我会放到 Github 上。
cooking-demo/simple
cooking
cooking 文档
npminstall
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)相关推荐
- Jenkins——如何快速搭建一个简单的基于 Jenkins 的持续集成环境
首先,在Jenkins官网(http://jenkins-ci.org/)上,下载所需要用的Jenkins版本.我们都是Windows系统,下载Windows版的即可.下载下来之后,进行安装,一步一步 ...
- 搭建一个简单的Spring boot+maven项目
http://www.cnblogs.com/suncj/p/4065589.html
- webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
- SpringBoot搭建一个简单的天气预报系统(一)
章节目录 1. 前言 2. 数据来源 3. 实战 3.1 开发环境 3.2 功能需求 3.3 手动编码 3.3.1 vo层 3.3.2 service层 3.3.3 controller层 3.3.4 ...
- 用思科网络模拟器搭建一个简单的局域网
目录 前言 搭建 配置 前言 在搭建一个简单的局域网前,你必须知道一些常识. 网线(双绞)线的标准 T568A标准:白绿.绿.白橙.蓝.白蓝.橙.白棕.棕 T568B标准:白橙.橙.白绿.蓝.白蓝.绿 ...
- iris流程图_如何搭建一个简单的机器学习流水线?
阅读此分步教程,学会通过导入scikit-learn包来搭建一个简单的机器学习流水线(pipeline) 一个机器学习模型中,有很多可移动的组件需要被组合在一起,模型才能被执行并成功的得到结果.把机器 ...
- 怎样用python搭建简单的系统_如何用Python搭建一个简单的推荐系统?
推荐系统的相关知识我们已在前文中提到,在这篇文章中,我们会介绍如何用Python来搭建一个简单的推荐系统. 本文使用的数据集是MovieLens数据集,该数据集由明尼苏达大学的Grouplens研究小 ...
- python旅游推荐系统_如何用Python搭建一个简单的推荐系统?
推荐系统的相关知识我们已在前文中提到,在这篇文章中,我们会介绍如何用Python来搭建一个简单的推荐系统. 本文使用的数据集是MovieLens数据集,该数据集由明尼苏达大学的Grouplens研究小 ...
- python代理池_用Python搭建一个简单的代理池
其实每次爬东西的时候,特怕IP被封,所以每次都要把时间延迟设置得长一点...这次用Python搭建一个简单的代理池.获取代理IP,然后验证其有效性.不过结果好像不是很理想,为什么西刺代理的高匿代理都能 ...
最新文章
- java changelistener_ListChangeListener.Change
- 一个网站项目的开始,定位有多重要?
- 前端_JavaScript_Method
- RuoYi(分离版) 使用代码生成器添加子模块(idea版)
- python精要(81)-collections容器类型(1)-统计相同的值
- docker选择安装位置_监控摄像机的安装位置选择和焦距选择
- php语句结束标记,PHP结束标记“?”
- hdu acm2549
- 动软代码生成器-模板修改,模型修改
- Android LayoutInflater源码分析
- VINS-Mono 代码详细解读——回环检测与重定位、四自由度位姿图优化
- 行业分析-全球与中国无线键盘和蓝牙耳机市场现状及未来发展趋势
- 热搜第一!中国烟草总公司工资曝光,员工人均年收入超18万元!网友:简直是不锈钢饭碗!...
- 软件实施整体方案之实施进度表
- 谣言检测相关论文阅读笔记:PAKDD2020-SAFE: Similarity-Aware Multi-Modal Fake News Detection
- 芯片验证漫游指南 pdf_更好地认识PDF 文件
- Android 9使用APP来控制手电筒功能
- 进程和线程的区别,进程间通信方式,怎么选择比较好
- Springboot-静态资源访问
- 概率论(离散型)极简入门
热门文章
- MySQL下的NoSQL解决方案HandlerSocket
- 关于Dreamweaver乱码问题的解决方案
- 模态对话框的父窗口设置
- 吴恩达老师深度学习视频课笔记:序列模型和注意力机制
- OpenCV代码提取:flip函数的实现
- 【FFmpeg】解决警告warning: xxx is deprecated [-Wdeprecated-declarations]的方法
- github上好的c语言项目,2019 github热门项目
- java pdf插件下载_免费java pdf控件
- python tkinter 滚动条_如何在tkinter窗口中添加滚动条?
- python简单单元测试示范卷_Python 单元测试的简单示例