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

文章目录

- 什么是Webpack
- 什么是Vue-cli脚手架
- [使用Vue-cli 创建Webpack开发工具](#使用Vue-cli 创建Webpack开发工具)
- - 第一、二步
  - 第三步
- 运行流程
- - 运行流程讲解
  - 案例
  - .$mount('#app')和el: '#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）

第一、二步

bash 复制代码

// 随便打开一个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 回车

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

bash 复制代码

vue create demo-first
// 使用上下箭头改变下面三个选项 
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)  //这个是安装Vue 3
  Default ([Vue 2] babel, eslint)  //这个是安装Vue 2
  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   //这是解决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 Testing

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 (Use arrow keys)
> 3.x
  2.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预处理器，选择这个，就这个学过 回车
  Stylus

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.? (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 funding
  run `npm fund` for details

🚀  Invoking generators...
📦  Installing additional dependencies...

added 20 packages from 18 contributors in 4.522s

95 packages are looking for funding
  run `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 dev
 
D:\笔记之前端\笔记之Vue\笔记\code\第3章\day3_code>cd demo-first

D:\笔记之前端\笔记之Vue\笔记\code\第3章\day3_code\demo-first>npm run serve


DONE  Compiled successfully in 4833ms                                                                                                      11:49:03


  App 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的注释,解释说明

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文件。

html 复制代码

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

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

js 复制代码

import Vue from 'vue'
import App from './App.vue'

import Test from './components/Test.vue'


Vue.config.productionTip = false

new 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' 的区别

本质是一样的。

html 复制代码

<head>
  <title>Document</title>
  	<script src="https://cdn.jsdelivr.net/npm/[email protected]/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中数据源，方法，计算属性这些东西。

js 复制代码

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

js 复制代码

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