使用HBuilderX编写第一个Vue项目

首先建好文件目录后

我的文件结构如下:
在这里插入图片描述
使用HBuilderX自带终端命令窗口(以下所有命令都是基于01webpack路径)

导入jQuery

1.npm init -y 初始化
2.npm i jquery -S 导入jquery包
编写main.js 先导入jQuery
在这里插入图片描述
导入后直接在index.html中引用js文件浏览器会报错:undefined token import
需要使用webpack命令进行编译main.js
方法有两种:
(1)webpack 要打包文件 -o 输出路径(不推荐用)
此方法适用于webpack版本为4 ,其他版本不需加 -o ,查看webpack版本号输入 webpack -v
(2)直接输入webpack自动编译
配置webpack.config.js文件
文件存放路径很重要
配置格式如下:在这里插入图片描述
完成后导入bundle.js文件
<script src="./dist/bundle.js"></script>

进行第二步之后:

安装webpack-dev-server 本地依赖
这个工具可实现自动打包编译的功能
1.使用npm/cnpm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖
2.安装完毕后使用方法webpack完全一样
3.由于是在项目中本地安装的webpack-dev-server,所以无法在powershell中把他当做脚本命令,在终端中直接运行,(只有安装到全局-g的工具才行)
所以需在package.json中配置
在这里插入图片描述
!若报错未安装webpack警告(如下图),输入cnpm i webpack -D
在这里插入图片描述
4.安装完成后,继续输入npm run dev,会出现如下语句,说明运行成功 (终端会一直处于运行状态 按ctrl+c停止运行)在这里插入图片描述说明webpack-dev-server打包生成的/bundle.js文件并没有存放到实际物理磁盘上,而是托管到了电脑内存中,所以看不到
此时更改js引用路径
在这里插入图片描述
bundle.js目录变为 /bundle.js,因为我们的项目被托管在根目录下了
项目可通过localhost:8080访问

也可在package.json文件中进行相关配置:在这里插入图片描述
说明:
‘–open’:       自动在浏览器中打开
‘–port 3000’:   打开端口号位3000,(我没改,默认为8080)
‘–contentBase src’:直接打开src目录
‘–hot’:热更新,检测到代码更新并保存后,自动刷新页面

Logo

前往低代码交流专区

更多推荐