webpack+vue开发环境搭建

2021-06-04 01:04

阅读:640

标签:信息   router   and   attr   环境搭建   快速   扩展性   save   conf   

前提:

  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中运行命令运行项目

webpack+vue开发环境搭建

标签:信息   router   and   attr   环境搭建   快速   扩展性   save   conf   

原文地址:https://www.cnblogs.com/nongfusanquan/p/12344637.html


评论


亲,登录后才可以留言!