vue学习

本文详细介绍了从安装node.js开始,逐步搭建并配置webpack,包括安装webpack、webpack-cli、lodash、style-loader、css-loader、file-loader,导入css和图片,使用html-webpack-plugin插件,设置实时刷新页面的webpack-dev-server,以及结合express服务器的配置过程。
摘要由CSDN通过智能技术生成

1、下载安装node.js
    点击该网址https://nodejs.org/en/download/  ,选择合适的版本,我用的最新版node-v12.16.0-x64.msi,点击下一步下一步安装即可,也可选择安装到自己其它的硬盘,默认c盘。
    
2、查看node.js版本
   在命令行输入node -v 回车,将回显nodeJs已安装的版本号(v12.16.0)。
   
3、查看npm版本
   新版nodeJs集成了npm,在命令行输入npm -v,将回显npm安装的版本号(6.13.4).
   
4、webpack构建vue项目
   新建一个项目目录,cd /d 定位进去,然后输入npm init。会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件。
   生成package.json.
   
5、安装webpack,高版本webpack需要安装webpack-cli。
   npm install webpack webpack-cli --save--dev.
   
6、安装lodash组件,在index.js里面import组件。
   npm install --save lodash
   
7、新建dist文件夹,创建index.html,创建分发发布版。

8、执行npx webpack,会在dist文件夹下生成main.js(js压缩优化输出),index.html引用main.js。

9、js导入css
   执行npm install --save-dev style-

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值