创建基于Webpack的Vue.js项目
创建基于Webpack的Vue.js项目。一、Webpack简介。二、创建基于Webpack的Vue.js项目1、前提条件(检查node和npm版本信息,升级你的 Node 版本)。2、安装Webpack、Vue.js。3、创建基于Webpack的Vue.js项目。三、Webpack下的Vue.js项目文件结构。四、打开Vue项目管理器
创建基于Webpack的Vue.js项目
本文目录：
一、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 版本。
详细教程可参阅下面链接文章：
https://blog.csdn.net/weixin_69553582/article/details/1295845872、安装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 featuresVue 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 TestingVue 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 only
ESLint + Airbnb config
ESLint + Standard config
ESLint + 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)
> Jest
Mocha + 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 files
In package.jsonWhere 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:27
App 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 |  | |
| 28 |  | |
| 27 |  | |
| 26 |  | |
| 25 |  | |
| 24 |  | |
| 23 |  | |
| 22 |  | |
| 21 |  | |
| 20 |  | |
| 19 |  | |
| 18 |  | |
| 17 |  | |
| 16 |  | |
| 15 |  | |
| 14 |  | |
| 13 |  | |
| 12 |  | |
| 11 |  | 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） |
| 10 |  | |
| 9 |  | |
| 8 |  | |
| 7 |  | 2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状 |
| 6 |  | |
| 5 |  | |
| 4 |  | |
| 3 |  | |
| 2 |  | |
| 1 |  |
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献3条内容
所有评论(0)