创建基于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 版本。

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

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 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.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: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​​

SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例)

28​​

查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决

27bba02a1c4617422c9fbccbf5325850d9.png​​

别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(1)

26fea225cb9ec14b60b2d1b797dd8278a2.png​​

2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特

251f53fb9c6e8b4482813326affe6a82ff.png​​

2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载)

246176c4061c72430eb100750af6fc4d0e.png​​

HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

2317b403c4307c4141b8544d02f95ea06c.png​​

​草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码

225d409c8f397a45c986ca2af7b7e725c9.png​​

【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码)

210a4256d5e96d4624bdca36433237080b.png​​

python爱心源代码集锦(18款)

204d9032c9cdf54f5f9193e45e4532898c.png​​

巴斯光年python turtle绘图__附源代码

19074cd3c255224c5aa21ff18fdc25053c.png​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一)

18daecd7067e7c45abb875fc7a1a469f23.png​​

​草莓熊python turtle绘图代码(玫瑰花版)附源代码

17fe88b78e78694570bf2d850ce83b1f69.png​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

16c5feeb25880d49c085b808bf4e041c86.png​​

皮卡丘python turtle海龟绘图(电力球版)附源代码

1538266b5036414624875447abd5311e4d.png​​

【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向)

1403ed644f9b1d411ba41c59e0a5bdcc61.png​​

草莓熊python turtle绘图(风车版)附源代码

1309e08f86f127431cbfdfe395aa2f8bc9.png​​

用代码过中秋,python海龟月饼你要不要尝一口?

1240e8b4631e2b486bab2a4ebb5bc9f410.png​​

《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念

11938bc5a8bb454a41bfe0d4185da845dc.jpeg​​

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

100f09e73712d149ff90f0048a096596c6.png​​

Python函数方法实例详解全集(更新中...)

993d65dbd09604c4a8ed2c01df0eebc38.png​​

matplotlib 自带绘图样式效果展示速查(28种,全)

8aa17177aec9b4e5eb19b5d9675302de8.png​​

手机屏幕坏了____怎么把里面的资料导出(18种方法)

71750390dd9da4b39938a23ab447c6fb6.jpeg​​

2023年3月TIOBE 指数头条:编程语言 Go 进入 TIOBE 指数前 10 名,多家权威机构____编程语言排行榜__薪酬状

6dc8796ddccbf4aec98ac5d3e09001348.jpeg​​

Python中Print()函数的用法___实例详解(全,例多)

51ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​

色彩颜色对照表(一)(16进制、RGB、CMYK、HSV、中英文名)

480007dbf51944725bf9cf4cfc75c5a13.png​​

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细)

3c6374d75c29942f2aa577ce9c5c2e12b.png​​

Tomcat 启动闪退问题解决集(八大类详细)

25218ac5338014f389c21bdf1bfa1c599.png​​

Tomcat端口配置(详细)

1fffa2098008b4dc68c00a172f67c538d.png​​

tomcat11、tomcat10 安装配置(Windows环境)(详细图文)

Logo

前往低代码交流专区

更多推荐