vue6-webpack

nrm 提供镜像地址，并且容易让用户切换镜像地址

npm 管理器

使用：

webpack

定义

Gulp 和 webpack 的区别

Gulp：若大任务里面又有很多小任务，这样构建起来就会非常复杂，适合小的任务
Webpack：基于宏观来考虑的，适合大任务
两个的应用场景不一样。:

webpack 处理的好处

步骤

1.创建目录
2.把项目管理起来，要注意 如果是中文的目录名，直接 npm init ，它会提示你输入名称

webpack.conf.js 能够声明 入口文件和出口文件路径，就不需要老是：webpack 入口文件 出口文件

命令行则简化为：

---

---

---

npm run dev

上面太麻烦了，想要一直在线，能够自动监听代码改变 => webpack-dev-server 这个工具可以实现自动打包功能
1.安装

hot:热更新，不会每次都重新生成bundle.js 它只会对局部更新，可以减少不必要的代码更新。

引入webpack-plugin

作用：

步骤：

处理第三方 loader

css less scss sass

图片 url-loader

字体图标 url-loader

babel

作用：

高级ES6,例如class

步骤：

1.安装包，包括两套包：①语法 语法之间的转换关系 例如ES6语法转换成ES3的语法 ②插件 转换工具
2.配置webpack的语法规则 rules下，要注意exclude node_modules 这个包
3.新建 .babelrc的配置文件，JSON格式
配置包括 “presets” “plugin” 把上面1步骤两个包的名字写上。

error & warning

1

dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js vue启动报错解决
这是因为webpack-dev-server版本和vue版本不一样，需要将webpack-dev-server卸载了，安装对应版本

查看vue版本是 vue -V

注意：V是大写

卸载npm uninstall webpack-dev-server，在安装这个npm i webpack-dev-server@2.9.7，我的可以正常启动了。

2

3

webpack + Vue

render渲染组件

webpack + Vue

总结

开始

解决方法：

组件vue文件 需要用webpack的loader

如果要在runtime-only下使用，就可以用render

export default 和 export

举例：

接收：

export 用{} 来接收：

Vue-router + Webpack

效果：app组件不会被两个router覆盖，原因见上上图：

Vue-router 子路由

与之前学的一样

scoped lang

1.

2.√
使用scoped，子组件也会被改变

抽离路由