Vue-cli

Vue是一套构建用户界面的渐进式框架,其核心思想为组件化和数据驱动。

vue-cli 下载地址 https://github.com/vuejs/vue-cli

  • 组件化是将整体拆分成块,组件可复用。
  • 数据驱动释放了对DOM的操作,让DOM随着数据变化而自然变化。
  • vue-cli是Vue的脚手架工具
vue-cli
  • vue-cli是快速构建单页应用(SPA)的脚手架


    vue-cli

构建流程

# 查看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

WebPack将项目当做一个整体,通过给定的入口文件(主文件)开始寻找项目依赖文件,并使用loaders进行处理,最后打包为一个或多个浏览器可识别的JS文件。

# npm全局安装webpack
$ npm install -g webpack

# npm安装webpack到项目目录,写入开发依赖中。
$ npm install --save-dev webpack
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容