Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目

哪吒

已于 2023-03-26 00:34:32 修改

阅读量4w

点赞数 153

分类专栏： JavaScript与Vue基础教程系列文章标签： java

于 2021-10-08 19:37:08 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/guorui_java/article/details/120593645

版权

JavaScript与Vue基础教程系列专栏收录该内容

39 篇文章 116 订阅

订阅专栏

🏆作者简介：哪吒，CSDN2022博客之星Top1、CSDN2021博客之星Top2、多届新星计划导师✌、博客专家💪，专注Java硬核干货分享，立志做到Java赛道全网Top N。

🏆本文收录于，Java基础教程系列，目前已经700+订阅，CSDN最强Java专栏，包含全部Java基础知识点、Java8新特性、Java集合、Java多线程、Java代码实例，理论结合实战，实现Java的轻松学习。

🏆姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。

🏆姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。

🏆全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。

一、什么是VueCLI

1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

3、CLI是什么意思？

4、脚手架长什么样？

5、脚手架依赖于node.js和webpack

二、安装Vue CLI脚手架

三、runtime-compiler和runtime-only的区别

1、runtime-compiler加载过程

2、runtime-only加载过程：（性能更高，代码更少）

1、vue-cli 3 与 vue-cli 2 版本的区别？

一、什么是VueCLI

1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那么无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

3、CLI是什么意思？

CLI是Commond-Line Interface，翻译为命令行界面，俗称脚手架。
VueCLI是一个官方发布vue.js项目脚手架。
使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。

4、脚手架长什么样？

5、脚手架依赖于node.js和webpack

二、安装Vue CLI脚手架

//默认安装脚手架3
npm install -g @vue/cli

//安装脚手架2
npm install -g @vue/cli-init

//脚手架2创建项目
vue init webpack my-project

//脚手架3创建项目
vue create my-project

三、runtime-compiler和runtime-only的区别

1、runtime-compiler加载过程

template -> ast -> render -> vdom -> UI

2、runtime-only加载过程：（性能更高，代码更少）

render -> vdom -> UI

3、小结

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler；

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only；

4、代码实例

main.js

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

Vue.config.productionTip = false

/* eslint-disable no-new */
// const cpn = {
//   template: '<div>{{message}}</div>',
//   data() {
//     return {
//       message: '我是组件message'
//     }
//   }
// }

new Vue({
  el: '#app',
  render: function (createElement) {
    // 1.普通用法: createElement('标签', {标签的属性}, [''])
    // return createElement('h2',
    //   {class: 'box'},
    //   ['Hello World', createElement('button', ['按钮'])])

    // 2.传入组件对象:
    return createElement(App)
  }
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>runtimecompiler</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5、npm run build执行过程

6、npm run dev执行过程

四、认识Vue CLI3

1、vue-cli 3 与 vue-cli 2 版本的区别？

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中

2、通过脚手架3构建项目

vue create my-project

运行项目

npm run serve

注意：

之前学习的时候main.js

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

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

通过 Vue CLI3创建的项目main.js

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

两种写法没区别。

el多了一个判断，el被解析为$mount。

五、箭头函数

1、定义函数的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 箭头函数: 也是一种定义函数的方式
  // 1.定义函数的方式: function
  const aaa = function () {

  }

  // 2.对象字面量中定义函数
  const obj = {
    bbb() {

    }
  }

  // 3.ES6中的箭头函数
  // const ccc = (参数列表) => {
  //
  // }
  const ccc = () => {

  }

</script>
</body>
</html>

2、箭头函数参数和返回值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<script>
  // 1.参数问题:
  // 1.1.放入两个参数
  const sum = (num1, num2) => {
    return num1 + num2
  }

  // 1.2.放入一个参数
  const power = num => {
    return num * num
  }

  // 2.函数中
  // 2.1.函数代码块中有多行代码时
  const test = () => {
    // 1.打印Hello World
    console.log('Hello World');

    // 2.打印Hello Vuejs
    console.log('Hello Vuejs');
  }

  // 2.2.函数代码块中只有一行代码
  // const mul = (num1, num2) => {
  //   return num1 + num2
  // }
  const mul = (num1, num2) => num1 * num2
  console.log(mul(20, 30));

  // const demo = () => {
  //   console.log('Hello Demo');
  // }
  const demo = () => console.log('Hello Demo')
  console.log(demo());


</script>
</body>
</html>

3、什么时候使用箭头函数

什么时候使用箭头
setTimeout(function () {
  console.log("我是csdn哪吒");
}, 1000)

setTimeout(() => {
  console.log("我是csdn哪吒");
}, 1000)

4、箭头函数与this

// 问题: 箭头函数中的this是如何查找的了?
// 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
const obj = {
  aaa() {
    setTimeout(function () {
      console.log(this); // window
    })

    setTimeout(() => {
      console.log(this); // obj对象
    })
  }
}

obj.aaa()

六、前端路由vue-router

1、维基百科

路由就是通过互联的网络把信息从源地址传输到目的地址的活动。

2、路由的机制

路由包括路由和转发。

路由器 -> 公网IP -> 映射表 -> 内网IP

映射表：[内网ip1:电脑标识1，内网ip2:电脑标识2]

3、后端渲染

JSP：java server page

后端渲染 == html + css + java

java代码的作用是从数据库中读取数据，然后将他们动态的放在页面中。

后端渲染的意思就是，前端请求后端，页面的数据在后端已经渲染好了，然后再返回前端，内容包括HTML+css，当然是包含数据的HTML。

后端路由：后端处理URL和页面之间的映射关系。

4、后端路由阶段

早期的网站开发整个HTML页面是由服务器来渲染的。
服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。

但是, 一个网站, 这么多页面服务器如何处理呢?

一个页面有自己对应的网址, 也就是URL。
URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理。
Controller进行各种处理, 最终生成HTML或者数据, 返回给前端。
这就完成了一个IO操作。

上面的这种操作, 就是后端路由：

当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿。
这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化。

后端路由的缺点：

一种情况是整个页面的模块由后端人员来编写和维护的。
另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码。
而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情。

5、前后端分离

后端只负责提供数据，不负责其它任何阶段。

浏览器中显示的网页中的大部分内容，都是由前端写的JS代码在浏览器中执行，最终渲染出来的网页。

随着Ajax的出现, 有了前后端分离的开发模式。
后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中。
这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上。
并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可。
目前很多的网站依然采用这种模式开发。

6、单页面富应用阶段

其实SPA最主要的特点就是前后端分离的基础上加上了一层前端路由；
也就是前端来维护一套路由规则

7、SPA页面

SPA：单页富应用

整个网页只有一个HTML网页。

8、前端路由

URL和前端页面的映射关系。

-----> vue router

前端路由的核心是什么呢？

改变URL，但是页面不进行整体的刷新。

七、改变URL，但是页面不进行整体的刷新

1、URL的hash

URL的hash也就是锚点，本质上是改变window.location的href属性。

我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。

2、HTML5的history

history.pushState({},'','home')

history.pushState相当于栈的操作，先进后出，弹栈和入栈的操作。

history.pushState入栈；

history.back()出栈；

history.go(-1) 相当于 history.back()；

history.forward 相当于history.go(1)；

history.replaceState()：不能返回；

🏆本文收录于，Java基础教程系列，目前已经700+订阅，CSDN最强Java专栏，包含全部Java基础知识点、Java8新特性、Java集合、Java多线程、Java代码实例，理论结合实战，实现Java的轻松学习。

🏆姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。

🏆姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。

🏆全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。

哪吒

关注

153
点赞
踩
456

收藏

觉得还不错? 一键收藏
打赏
105
评论
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目

???? Java学习路线：搬砖工逆袭Java架构师???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???????? 扫描主页左侧二维码，加入群聊，一起学习、一起进步???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
复制链接

扫一扫