Vue基础学习7

webPack简单脚手架搭建

webPack是一个前端资源模块化加载器和打包工具,它能够把各种资源作为模块来使用和处理,实际上,它是通过不同loader将这些资源加载之后打包的,然后输出打包后的文件。他就是一个模块加载器。

搭建步骤:

1、通过npm init生成package.json文件

需要对立面的一些节点进行修改

安装相关模板

Vue基础学习7

这里是教程提供的一些基础模板

最终完成后的package.json为:

Vue基础学习7

 

2、配置webpack (配置webpack.config.js文件)

Vue基础学习7

这个要手动生成

3、编写main.js ( main.js是入口文件,webpack编译会通过根目录文件打包到build.js)

Vue基础学习7

手动生成

 

 

Vue-cli快速脚手架搭建

Vue-cli是构建单个网页应用的脚手架,它本身集成了多种匡牧模板:

Webpack:基于webpack,用的较多,包含eslint,unit等。

Webpack-simple 基于webpack,更简洁,无eslint,unit。

安装步骤:

1、 安装vue-cli,配置vue命令环境

npm install vue-cli –g

这里需要好好看看需要的node版本的限制,用nvm去选择合适版本的node,不然安装不了

安装好之后查看脚手架:vue –V 查看版本

2、 初始化项目

a) 构建项目

vue init webpack-simple vue-cli-demo

b) 进入项目并进行自动化安装

cd vue-cli-demo

npm install

c) 运行项目

npm run dev

d) 打包上线

npm run build

 

在完成之后,我们就能获得文件夹为:

Vue基础学习7

之前在webpack脚手架搭建中需要手动写的文件,我们现在已经全部自动生成了。

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章:

  • 2021-09-05
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-10
  • 2021-05-20
  • 2021-09-27
  • 2021-09-19
猜你喜欢
  • 2022-02-08
  • 2022-12-23
  • 2022-03-07
  • 2021-06-30
  • 2021-11-29
  • 2021-05-05
  • 2021-07-22
相关资源
相似解决方案