当前位置：首页 > news >正文

Vue之使用Vue-cli创建Webpack工程化项目

news 来源：原创 2025/5/30 11:12:27

文章目录

- 什么是Webpack
- 什么是Vue-cli脚手架
- 使用Vue-cli 创建Webpack开发工具
- - 第一、二步
  - 第三步
- 运行流程
- - 运行流程讲解
  - 案例
  - .$mount('#app')和el: '#app' 的区别
  - 使用Webpack和使用核心库开发的语法区别。

什么是Webpack

核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。
工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。

比如我们的代码有ES6高级语法，TS语法，Less语法，Sass语法。这些直接在浏览器中跑，浏览器不认识。我们的以前的解决办法就是通过插件(Less)或者包(TS)把这些语法转为JS语法解决浏览器不认识这些语法的问题。

比如：我们的使用TS,Less一起开发开发，Less通过Easy Less插件生成对应css样式，Ts通过安装ts-node包执行tsc --init 指令会生成对应js语法，然后我们需要把生成的js文件和css文件整和到html中进行使用。这太麻烦有没有一种方式我们只需要下载对应的包，然后直接帮我们生成html+Css+JS的工具呢。答案当然是有的：Webpack。

在这里插入图片描述

什么是Vue-cli脚手架

我们上述说过Webpack只要下载对应的包就能帮我们自动打包生成浏览器认识的H5+JS语法，而Vue-cli脚手架的作用通俗来说就是：通过给我们选项帮我们安装相关的包，而且还会给我们创建相关的打包工具。

专业的表述是：Vue CLI 是 Vue 官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

注意不同版本的Vue-cli脚手架创建的项目文件目录不同，如果创建的项目目录和我的不一样不要着急，问问ai这些都是干什么用的就好

好处：

开箱即用，零配置
内置 babel 等工具
标准化

使用Vue-cli 创建Webpack开发工具

使用步骤：

全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g
查看 Vue-cli 版本：vue --version
创建项目架子：vue create project-name（项目名-不能用中文）
启动项目： yarn serve 或 npm run serve（找package.json）

第一、二步

// 随便打开一个cmd 输入一个命令 因为他是全局的
PS D:\Node_Nvm> npm install -g @vue/cli// 查看版本
PS D:\Node_Nvm> vue -V
@vue/cli 5.0.8

第三步

基于 vue-cli 快速生成工程化的 Vue 项目：vue create 项目的名称

第一步，打开你要创建的目录，比如打开day3_code文件夹
第二步，在文件上方搜索栏输入cmd 回车请添加图片描述

第三步选择要安装哪些东西。

vue create demo-first
// 使用上下箭头改变下面三个选项 
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)  //这个是安装Vue 3Default ([Vue 2] babel, eslint)  //这个是安装Vue 2Manually 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   //这是解决js兼容性，必须安装                ( ) TypeScript( ) Progressive Web App (PWA) Support  // 渐进式的web( ) Router( ) Vuex( ) CSS Pre-processors  //CSS预处理器  按下空格键前面小括号有个星号代表选中安装(*) 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)(*) 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: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x2.x // 选择这个回车Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)Less   // 这些都是CSS预处理器，选择这个，就这个学过 回车StylusVue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
// 这句话是说 Babel, ESLint, etc.这些第三方插件的配置文件是放到 独立配置文件，还是放到package.json
> In dedicated config files  //独立配置文件 选择这个 回车In package.json  // // 这句话是说 是否把上面的选项保存，
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)// 选择y
// 给这个保存起个名字
? Save this as a preset for future projects? (y/N)Yes
? Save preset as: hsh1  // 回车// 注意在他安装时不触碰，cmd面板，如果动了 会暂停安装，想要继续，点击一下cmd面板，CTRL+C继续安装93 packages are looking for fundingrun `npm fund` for details🚀  Invoking generators...
📦  Installing additional dependencies...added 20 packages from 18 contributors in 4.522s95 packages are looking for fundingrun `npm fund` for details⚓  Running completion hooks...📄  Generating README.md...🎉  Successfully created project demo-first.
👉  Get started with the following commands: //想要开发执行下面两个命令$ cd demo-first  // $ npm run serve  // 第一天我们配置的名字是npm run devD:\笔记之前端\笔记之Vue\笔记\code\第3章\day3_code>cd demo-firstD:\笔记之前端\笔记之Vue\笔记\code\第3章\day3_code\demo-first>npm run serveDONE  Compiled successfully in 4833ms                                                                                                      11:49:03App running at:- Local:   http://localhost:8080/- Network: http://10.82.12.105:8080/Note that the development build is not optimized.To create a production build, run npm run build.
// 这个会打开一个我们的项目，如果把这个cmd关掉在去访问http://localhost:8080/会失败，我们只需要在vscode打开项目，打开终端输入 npm run serve// vscode终端
PS D:\笔记之前端\笔记之Vue\笔记\code\第3章\day3_code\demo-first> npm run serve  
// 两次CTRL + C结束vscode终端

第四步：使用VSCode或者Trae CN打开项目。不同版本Vue-Cli创建的目录可能不同但是大概都是一样的。
在这里插入图片描述

运行流程

运行流程讲解

在这里插入图片描述

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue结构渲染到 index.html 的指定区域中。其中：

① App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

下面是src->main.js的注释,解释说明

// 导入 vue 这个包，得到 Vue 构造函数 new Vue({  })
import Vue from 'vue'
// 导入 App.vue 根组件，将来要把 App.vue 中的模板结构，渲染到 HTML 页面中
// import App from './App.vue'
import App from './App.vue'Vue.config.productionTip = false// 创建 Vue 的实例对象
new Vue({// 把 render 函数指定的组件，渲染到 HTML 页面中render: h => h(App),
}).$mount('#app')
// Vue 实例的 $mount() 方法，作用和 el 属性完全一样！

之所以我们打开index.html 没有看见导入main.js 是因为：用户提供的 HTML 文件是 Vue CLI 工程的标准化模板，通过 Webpack 构建工具链实现了资源引用的自动化。不需要手动添加对 main.js 的引用，因为入口文件的打包产物会被 HtmlWebpackPlugin 动态注入到 HTML 中。

案例

创建Test组件进行开发。

下面是一个例子，能更好理解运行流程
先在componts文件中创建Test.vue文件。

<template><div><h1>这是用户自定义的Test.vue</h1></div>
</template>

修改src->main.js中的代码

import Vue from 'vue'
import App from './App.vue'import Test from './components/Test.vue'Vue.config.productionTip = falsenew Vue({// 使用Test组件。render: h => h(Test)
}).$mount('#app')
// 结果为：这是用户自定义的Test.vue

public->index.html 中内容不变

这上面代码可以理解为，Test.vue的代码将public->index.html中的<div id=‘app’>给替换了

.$mount(‘#app’)和el: ‘#app’ 的区别

本质是一样的。

<head><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app">{{username}}</div><script>// 先创建对象在指定作用范围const vm = new Vue({data: {username: 'admin'}})vm.$mount('#app')// 下面是在创建对象的时候指定作用范围// new Vue({//   el: '#app',//   data: {username: 'admin' },// });</script>
</body></html>

使用Webpack和使用核心库开发的语法区别。

最大的区别是js中数据源，方法，计算属性这些东西。

// 核心库开发
new Vue({el: '#app',// 这里是对象的形式。data: {username: 'admin'},});

// webpack开发。
<script>// 默认导出。这是固定写法！export default {// data 数据源// 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。// 注意：组件中的 data 必须是一个函数data() {// 这个 return 出去的 { } 中，可以定义数据return {username: 'admin'}}}
</script>