Vue是一套构建用户界面的渐进式框架,其核心思想为组件化和数据驱动。
vue-cli 下载地址 https://github.com/vuejs/vue-cli
- 组件化是将整体拆分成块,组件可复用。
- 数据驱动释放了对DOM的操作,让DOM随着数据变化而自然变化。
- vue-cli是Vue的脚手架工具
-
vue-cli是快速构建单页应用(SPA)的脚手架
构建流程
# 查看node版本
$ node -v
v8.1.2
# 升级NPM
$ npm i -g npm
# 查看vue版本
$ vue -V
2.9.2
# 安装vue-cli
$ npm install -g vue-cli
# 创建demo项目
$ vue init <template> <project>
$ vue init webpack demo
$ cd demo && npm run dev
webpack 提前准备5套模板
- webpack
- webpack-simple
- browserify
- browserify-simple
- simple
WebPack
WebPack可看做是模块打包机,作用是分析项目结构找到JS模块及浏览器无法直接运行的扩展语言(SCSS、LESS、TypeScript...),将其转换和打包供浏览器使用。
WebPack将多种静态资源JS、CSS、LESS...转换成一个静态文件,减少页面请求次数。
- 以CommonJS书写,对AMD/CMD支持全面。
- 模块化的不仅是JS
WebPack将项目当做一个整体,通过给定的入口文件(主文件)开始寻找项目依赖文件,并使用loaders进行处理,最后打包为一个或多个浏览器可识别的JS文件。
# npm全局安装webpack
$ npm install -g webpack
# npm安装webpack到项目目录,写入开发依赖中。
$ npm install --save-dev webpack