使用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’:热更新，检测到代码更新并保存后，自动刷新页面