vuecli

最新推荐文章于 2024-07-16 23:09:04 发布

月屯

最新推荐文章于 2024-07-16 23:09:04 发布

阅读量145

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/feiqipengcheng/article/details/116463698

版权

vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

目录标题

前言
建立项目
main.js
vuevli3
- 建立 vuecli3项目
- 目录
箭头函数和this的使用ES6

前言

在这里插入图片描述

安装vuecli
全局安装 -g

建立项目

参考视频
在这里插入图片描述

关闭Eslint

main.js

首页
在这里插入图片描述

vuecli中runtime-compiler和runtime-only后者的版本比较好
简单总结
如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler；如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

vuevli3

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

建立 vuecli3项目

在这里插入图片描述

箭头函数和this的使用ES6

<!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>