最近查看了vuejs-template的源码,并仿照源码写了一个小型npm run dev
时的脚手架,但是中途也遇到了一些问题,记录一下
首先说一下vue-cli里面用到的npm包以及它的作用(全部可以在 https://www.npmjs.com/package/package 查询到):
opn 强制打开浏览器
var opn = require('opn') opn(uri)
path 用于路径解析,使用方法可以详见 node之path
express 服务器框架
var express = require('express') var app = express() app.use(中间件) app.listen(port, function (err) { // TODO })
webpack 打包工具
var compiler = webpack(webpackConfig) // compiler为webpack编译好的文件
webpack-dev-middleware webpack中间件,用于将编译好的文件存入内存
var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, // 访问路径 quiet: true // 不打印 }) devMiddleware.waitUntilValid(() => { console.log(`Listening at ${url}`) })
webpack-hot-middleware webpack热重载插件
```
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000 // 多久更新一次客户端
})
然后说一下遇到的问题
import Vue from vue
之后浏览器报错 Vue is not defined原因: 我为了防止一个页面多次引用vue文件,在 webpack.base.conf.js 文件里面设置了externals 属性
externals: {'vue': 'Vue' }
,之后import Vue from 'vue'
时不会在从node_modules里面引入,而是会直接在全局找到Vue并赋值给vue。 这样只要需要在html里面引入vue文件之后用了,但是由于我开始没有在html中加入vue文件导致找不到全局的Vue所以会报错。解决: 一种方法是去掉
externals
属性,另一种方法是在html
使用script
标签引入vue.js文件development is not defined
**原因:** `webpack.DefinePlugin` 中会将NODE_ENV直接变为development
**解决:** 要使用字符串,需要在配置时`{NODE_ENV: '"development"'}`