创建基于Webpack的Vue.js项目

本文目录：

一、Webpack简介

二、创建基于Webpack的Vue.js项目

1、前提条件

（1）、检查node 和npm版本信息

（2）、升级你的 Node 版本

2、安装Webpack、Vue.js

（1）、安装Webpack

（2）、安装Vue.js

3、创建基于Webpack的Vue.js项目

三、Webpack下的Vue.js项目文件结构

四、打开Vue项目管理器

一、Webpack简介

　　Webpack是一个打包工具，可以把JS、CSS、Node Module、Coffeescrip、SCSS/LESS、图片等都打包在一起，因此，现在几乎所有的SPA项目、JS项目都会用到Webpack。

其官方网站为：https://webpack.js.org/，
GitHub为https://github.com/webpack/ webpack。

　　Webpack的功能非常强大，对各种技术都提供了支持，仿佛是一个“万能胶水”，把所有的技术都黏合（集成）到了一起。

二、创建基于Webpack的Vue.js项目

　　Webpack+Vue.js的方式来做项目的，这样才可以做到“视图”“路由”“component”等的分离，以及快速打包、部署及项目上线。

1、前提条件

熟悉命令行

需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本

（1）、检查node 和npm版本信息

同时按window+R键,输入cmd,打开命令提示符窗口

输入： node –v　（查看本机安装的node版本）

输入： npm –v　（查看本机安装的npm版本）

（2）、升级你的 Node 版本

如果提示没有安装node或Node.js 版本较低，请升级你的 Node 版本。

详细教程可参阅下面链接文章：

Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）https://blog.csdn.net/weixin_69553582/article/details/129584587

2、安装Webpack、Vue.js

npm install表示安装某个node package（包）

-g表示这个包安装后可以被全局使用

当确定安装好 node.js 后，重新打开 cmd 命令窗口输入：

（1）、安装Webpack

Webpack的安装命令如下：

npm install --save-dev webpack

或

npm install webpack -g

查看webpack的版本

npm webpack -v

（2）、安装Vue.js

需要同时安装Vue和vue-cli这两个Node package。

运行下面的命令：

npm install vue -g （或：cnpm install vue -g）

npm install @vue/cli –g

或

npm install -g @vue/cli@版本号 vue@版本号

或：

验证vue安装

验证安装是否成功

npm list vue

npm list vue -g

运行后，如果看到下面的消息，就说明安装成功：

3、创建基于Webpack的Vue.js项目

　　创建基于Webpack的Vue.js项目，最好在cd进入到某盘的某个位置，即项目的路径，否则项目会新建在C:\Users\Administrator\，也可以直接在想要的项目路径下输入cmd。

　　例如我在C:\00program\vue\vuelearn，建立项目名：vue3webpack

我们运行以下命令：

vue create vue3webpack (将vue3webpack替换成你的项目名)

之后，会进入到交互模式：

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)Manually select features

Vue CLI v5.0.8

Please pick a preset: (Use arrow keys)------》请选择预设：（使用箭头键）
Default ([Vue 2] babel, eslint)------》默认（[Vue 2] babel， eslint）
Default (Vue 3) ([Vue 3] babel, eslint)------》默认（Vue 3）（[Vue 3] babel， eslint）
> Manually select features------》> 手动选择功能

　　我们选择最下面的Manually select features，然后按回车键，会出现选项，然后选择本项目中需要的特性，如下：

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support( ) Router( ) Vuex( ) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing

Vue CLI v5.0.8

Please pick a preset: Manually select features------》请选择一个预设：手动选择功能

Check the features needed for your project:(Press <space> to select, <a> to toggle all, <i> to invert selection, and<enter> to proceed)------》检查项目所需的功能：（按下<space>可选择、 <a> 切换全部、 <i> 反转选择和<enter> 继续）

(*) Babel------》 Babel
(*) TypeScript------》支持TypeScript
( ) Progressive Web App (PWA) Support------》渐进式 Web 应用程序（PWA）支持
(*) Router ------》路由器
(*) Vuex------》Vuex
( ) CSS Pre-processors ------》CSS 预处理器
( ) Linter / Formatter ------》Linter/格式化程序
(*) Unit Testing------》单元测试
( ) E2E Testing------》E2E 测试

　　根据上面的提示，我们在第一个(Babel)，第二个（TypeScript），第四个(Router)，第五个(Vuex)和第八个(Unit Testing)前面按空格键，表示选中，然后按回车键。接下来会出现版本选择，如下：

Choose a version of Vue.js that you want to start the project with------》选择一个 Vue.js 版本，你想用它来启动项目

> 3.x
2.x

选择3.x之后，按回车键，出现下面的提示：

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N)

Use class-style component syntax? (y/N)------》使用类样式的组件语法？（是/否）

我们直接按回车键，表示选择默认的 No

出现下面的提示：

 Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)------》将 Babel 与 TypeScript 一起使用（modern 模式、自动检测的 polyfill、转译 JSX 需要）？（是/否）

我们直接按回车键，表示选择默认的 Yes

出现下面的提示：

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

------》询问我们是否对路由使用history模式（是/否）

我们直接按回车键，表示选择默认的Yes，

接下来会看到下面的提示，

Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier

? Pick a linter / formatter config: (Use arrow keys)------》选择一个 linter /格式化程序配置：（使用箭头键）
> ESLint with error prevention only------》仅具有错误预防功能的 ESLint
ESLint + Airbnb config------》ESLint + Airbnb配置
ESLint + Standard config------》ESLint + 标准配置
ESLint + Prettier------》ESLint + Prettier

我们在原来的位置上直接按回车键，表示选择默认的 Basic，

回车后会让你选择增加lint的特性功能。（按下<space>可选择、 <a> 切换全部、 <i> 反转选择和<enter>继续）

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save( ) Lint and fix on commit

我们在原来的位置上直接按回车键，表示选择默认的 Lint on save，

接下来会看到下面的提示，

? Pick a unit testing solution: (Use arrow keys)
> JestMocha + Chai

让我们选择单元测试框架，如下：

Pick a unit testing solution:------》选择一个单元测试解决方案：

Jest
Mocha + Chai

这里选择Jest即可。

接下来会看到下面的提示，

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)------》你更喜欢在哪里放置 Babel、ESLint 等的配置？（使用箭头键）

In dedicated config files ------》每项配置有单独的文件
In package.json------》在package.json 文件中

选择这些配置文件时单独存放，还是直接存放在package.json文件里。

这里选择放在单独的文件里（In dedicated config files）。

Save this as a preset for future projects? (y/N)

Save this as a preset for future projects? (y/N)------》将其保存为未来项目的预设？（是/否）

这时按回车键默认No。（也可以选择保存，以方便下次使用）

至此，输入的条件结束，vue-cli会开始创建新项目的工作，在控制台上会打印如下内容：

至此，一个基于Vue3+Webpack，并且带有单元测试功能的项目就创建好了。

我们进入到该项目中，使其在本地以默认端口来运行：

cd vue3webpack

npm run serve

然后就可以看到在本地已经运行起来了：

 DONE  Compiled successfully in 3428ms                                                                          01:26:27App running at:- Local:   http://localhost:8080/- Network: http://192.168.1.5:8080/Note that the development build is not optimized.To create a production build, run npm run build.No issues found.

App running at:------》应用运行位置：

- Local: http://localhost:8080/------》- 本地： http://localhost:8080/

- Network: http://192.168.1.5:8080/-----》- 网络：http://192.168.1.5:8080/

Note that the development build is not optimized.------》请注意，开发版本未优化。

To create a production build, run npm run build.------》若要创建生产版本，请运行 npm 运行生成。

No issues found.------》未发现问题。

在本地用浏览器打开：http://localhost:8080

就可以看到刚才创建的基于Webpack的Vue.js项目欢迎页面，如图所示。

项目欢迎页面

三、Webpack下的Vue.js项目文件结构

　　前面我们已经安装了Webpack、vue-cli并运行成功，看到了Vue.js的第一个页面。那么接下来我们对Webpack下的Vue.js有一个全面的了解。

　　我们进入Vue.js项目所在的vue3webpack目录，它的文件结构如下：

下面将针对重要的文件和文件夹依次进行说明。

打包之后的文件所在目录如下：
vue3webpack项目（基于Webpack的Vue.js项目）│
│
├── .git 目录 .gitignore Git上传时，需要忽略的文件。
│　　　├──　v
│　　　├──　v
│　　　└──　v
│
├── node_modules 目录（vue 项目的文件依赖存放在这个文件夹。）
│　　　├──　所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
│　　　├──　v
│　　　└──　v
│
│
├── public 目录：存放项目公共资源。如网站LOGO等，项目的主入口文件index.html。
│ │ 通常我们不需要对public文件夹内的资源做任何修改。
│ │ 后续在构建打包时，public内容会直接放到dist文件夹内plugins插件资源；
│　　　├──　v
│　　　├──　v
│　　　└──　v
│
│
├── src 目录：存放 vue 项目的源代码。其下的各个文件（文件夹）分别为：
│　　　├──　assets 目录：资源文件，存放 css，图片等资源。
│　　　├──　component 目录：组件文件夹，存放 vue 的公共组件（核心）
│ │ （注册于全局，在整个项目中通过关键词便可直接输出）。
│ │
│　　　├──　router 目录：用来存放 index.js，用来配置路由，定义各个页面对应的URL。
│　　　├──　store 目录：组件文件夹，存放 vue 的公共组件
│　　　├──　views 目录：放主体页面，vue 文件是可以用来充当路由 view 的。
│　　　├──　tool：用来存放工具类 js，
│ │ 将 js 代码封装好放入这个文件夹可以全局调用
│ │ （如api.js，http.js 是对 http 方法和 api 方法的封装）。
│　　　├── main.js：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。
│　　　├── app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。
│　　　├──
│　　　└──　v
│
│
├── tests 目录：单元测试
│　　　├──　v
│　　　├──　v
│　　　└──　v
│
├── package.json 存放项目的依赖配置（比如 vuex，element-UI）
├── babel.config.js babel 转码器的配置文件。
├── vue.config.js vue 的配置文件。
├── yarn.lock 用来构建依赖关系树。
├──
└──

node_modules文件夹，文件夹中往往会有几百个文件夹，Node项目所用到的第三方包特别多，也特别大。这些文件是由$ npm install命令产生的。所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
src文件夹是核心源代码的所在目录，展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的），正常开发的时候一般只修改 src 文件夹下的文件。
index.html：如果是一级页面模板的话，App.vue就是二级页面模板。所有的其他Vue.js页面都作为该模板的一部分被渲染出来。
main.js：没有实际的业务逻辑，而是为了支撑整个Vue.js框架，作为程序的入口存在。
dist —— 项目构建打包后的默认输出目录。

本例中，package.json文件的内容如下：

{
"name": "vue3webpack",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@types/jest": "^27.0.1",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"ts-jest": "^27.0.4",
"typescript": "~4.5.5"
}
}

四、打开Vue项目管理器

vue有个本地图形化管理器，基于vue/cli-ui。

vue/cli-ui 是 vue-cli 内置的一套成熟的 UI。

Vue-cli 的 3.x 版本由内到外完全重写，带来了许多新特性。你可以在你的项目中选用路由、Vuex 和 Typescript 等等特性，并为项目添加“vue-cli 插件”。不过，这么多的选项也意味着它更加复杂，难以上手。相比局限的命令行界面，一个成熟的 GUI 更能帮助你发掘这些新特性，搜索和安装 vue-cli 插件，解锁更多可能。

使用方式如下：

(1) 第一步、创建 Vue 项目所在文件夹
(2) 第二步、同时按window+R键,输入cmd，打开命令提示符窗口，进入 Vue 项目所在目录
(3) 第三步、输入 vue ui 命令打开Vue 项目管理器

输入：vue ui

系统会自动打开本地Vue 项目管理器的页面：http://localhost:8000/project/select

在这里，可以创建、导入、管理vue项目。

	创建基于Webpack的Vue.js项目

	vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

	vue3 项目创建(UI图形化界面方式，可视化操作Vue项目，vue ui)

推荐阅读：


30		Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
29		SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
28		查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决
27		别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
26		2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特
25		2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）
24		HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
23		草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
22		【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
21		python爱心源代码集锦（18款）
20		巴斯光年python turtle绘图__附源代码
19		Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
18		草莓熊python turtle绘图代码（玫瑰花版）附源代码
17		立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦
16		皮卡丘python turtle海龟绘图（电力球版）附源代码
15		【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)
14		草莓熊python turtle绘图（风车版）附源代码
13		用代码过中秋，python海龟月饼你要不要尝一口？
12		《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
11		用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
10		Python函数方法实例详解全集(更新中...)
9		matplotlib 自带绘图样式效果展示速查（28种，全）
8		手机屏幕坏了____怎么把里面的资料导出（18种方法）
7		2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状
6		Python中Print()函数的用法___实例详解(全，例多）
5		色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)
4		Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
3		Tomcat 启动闪退问题解决集（八大类详细）
2		Tomcat端口配置（详细）
1		tomcat11、tomcat10 安装配置（Windows环境）（详细图文）