Webpack Vue3模板的创建

webpack是一个前端资源加载和打包工具，它可以将各种资源作为模板块来使用，然后将这些模块按照一定的规则进行打包处理，从而生成对应的静态资源 

webpack的安装

全局安装

npm install webpack webpack-cli -g

 切换到项目文件夹进行初始化

npm init

对webpack进行本地安装

npm install webpack --save-dev

@vue/cli的安装

npm install -g @vue/cli

安装完成之后，可以在命令行执行如下命令：

vue --version

如果显示了@vue/cli的版本号，则安装成功。

创建webpack项目 

前提：需要node.js环境，@vue/cli 已安装。官网下载地址

 1、在桌面随便创建一个文件夹，例如在桌面创建了一个demo文件夹。win+R输入cmd打开命令提示符，切换到刚创建的文件夹目录。

cd C:\Users\Administrator\Desktop\demo

 

2、输入如下命令(webpackdemo为项目名称)：

vue create webpackdemo

 

3、解释：

        Default ([Vue 3] babel,eslint) 创建默认Vue3项目；

        Default ([Vue 2] babel,eslint) 创建默认Vue2项目；

        Manually select features  手动选择；

这里选择手动选择 Manually select features。

 4、选择一些自定义的配置，点击空格键进行选择，这里我多选择了Router（路由）、Vuex（状态管理）、 CSS Pre-processors（CSS预处理器）

选择完成后，点击Enter进入下一步

5、 如下，选择Vue的版本，这里选择Vue3版本

 6、如下，选择路由是否使用history模式，这里输入y

 7、如下，选择一个CSS预处理工具，这里选择第一个默认选项

 8、如下，选择语法检查规范，这里选择第一个默认选项

9、 如下，选择代码检查方式，这里选择Lint on save

 10、如下，这里选择配置信息的存放位置，我选择了In package.json

 11、如下，是否保存当前的配置，以便下次创建项目时无须再次配置，我选择不保存

 12、等待下载

创建完成后显示效果： 

 

 13、项目创建完成后，进入创建的项目

cd webpackdemo

  然后启动项目： 

npm run serve

如下表示启动成功 

 

14、浏览器输入 http://localhost:8080/

 出现如下图表示成功