Vue-cli

Vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个Vue项目模板

主要功能

• 统一目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

nodejs安装

官网下载 https://nodejs.org/zh-cn/download/，无脑下一步

安装cnpm npm install cnpm -g

安装vue-cli cnpm install vue-cli -g

到此环境安装完成

创建第一个项目

执行以下命令

vue list 查看可创建的项目模板

vue init webpack myvue 按提示选择即可

cd myvue

vue install

中间如果有报错按提示修复即可

创建完成后用Idea打开即可

Webpack

是一个现代化JavaScript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

安装

npm install webpack -g

npm install webpack-cli -g

测试

webpack -v

webpack-cli -v

配置

创建webpack.config.js配置文件

• entry：入口文件，指定WebPack用哪个文件作为项目入口
• output：输出，指定WebPack把处理完成的文件放到指定路径
• module：模块，用于处理各种类型的文件
• plugins：插件，ge：热跟新，代码重用等
• resolve：设置路径指向
• watch：监听，用于设置文件改动后直接打包

打包

打包 webpack

监听打包 webpack --watch 监听修改后立马打包