webpack+vue开发环境搭建

Posted 2021-03-08 农夫三拳[电脑]

前提:

　　1.安装必要工具(node等);

　　2.安装全局vue-cli脚手架(快速搭建vue开发模板)

　　命令:npm install -g vue-cli

　　3.安装webpack

　　命令:npm install webpack -g (有问题可以使用npm install --save-dev webpack-cli -g命令)

　　4.运行命令: vue init webpack 项目名

　　注:回车后可能显示

Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.

　　解决方法:

npm install -g @vue/cli-init

　　注:webpack优势

　　对 CommonJS 、AMD 、ES6的语法做了兼容；
　　对js、css、图片等资源文件都支持打包；
　　串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
　　有独立的配置文件webpack.config.js；
　　可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
　　支持 SourceUrls 和 SourceMaps，易于调试；
　　具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
　　webpack 使用异步 IO 并具有多级缓存，使得 webpack 很快且在增量编译上更加快。

 

　　注:vue构建项目常见填写信息

　　Project Name：要创建的项目名称；

　　Project Description：项目简介，也会出现在package.json文件中，可选;

　　Author：作者，可选；

　　Install vue-router：是否安装vue路由组件；

　　Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测；

　　Setup unit tests with Karma + Mocha：是否需要安装测试(单元测试)；

　　Setup e2e tests with Nightwatch？：是否安装段到端的测试

　　5.根据README.md中运行命令运行项目