Web前端开发系列——1.0创建Vue项目_vue1.0

把官网读薄系列：https://cn.vuejs.org/guide/introduction.html

一、简介

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型。

Vue两个核心功能：

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

Vue 的组件可以按两种不同的风格书写：

• 选项式 API
• 组合式 API

选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

单文件组件

在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件）
Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

(这样就不用再通过.mount('#app')挂载到设定的HTML元素上了）

---

安装vue

• 官网下载vue.js包
• CDN方法引入 https://unpkg.com/vue@next

二、创建Vue项目

前提：已经下载和配置好node.js环境。

以管理员身份运行命令提示符cmd：
配置Vue环境：

• 全局安装vue-cli npm install -g @vue/cli

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型，也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

Vue CLI 是官方提供的基于** Webpack** 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。

通过命令行创建：

• 创建项目文件夹 vue create vue01（项目名称）
• 接下来就会要你选择配置信息 ? Please pick a preset:这里一般会有四个模板：①上一个文件创建保留的地址；②Vue3默认模板；③Vue2默认模板；④自定义配置
• 完成创建，运行项目cd vue01 回车 npm run serve
• 停止服务：两下Ctrl+C 或者Ctrl+C一下然后Y

通过图形化界面创建和管理项目：

在cmd中输入命令：vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

其他方式创建（初始化）Vue项目：

• 在cmd中进入指定目录，输入 npm init vue@latest
  需要下载这个包（会自动提醒）：create-vue@latest
• 进行相关 Add 配置
• cd vue0407
• npm install
• npm run dev

解读：
npm init vue@latest相当于npx create-vue@latest，npx 执行的是可执行的脚本，这个脚本哪里来，就需要看 create-vue 中的 package.json 的 bin 属性。
简单来说，npx create-vue =》 就是在执行 create-vue 项目的 outfile.cjs 文件 (.cjs 意思是 CommonJS规范)。我们初始化项目会提示我们选择配置，这些提示配置就都是根据这个 outfile.cjs 文件来的。

• npm create 是 npm init 的别名;
• npm init 除了我们熟知的初始化 package.json，还可以利用远程库来初始化项目；
• npm init vue 可以理解为： 执行create-vue》package.json》bin》create-vue》outfile.cjs

链接：https://juejin.cn/post/7133992076735152136

---

关于Vue2和Vue3：
如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init
这样
vue init的运行效果将会跟 vue-cli@2.x 相同
vue init webpack my-project

vue create 和 vue init 的区别:

• vue create是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。
• vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)
  https://blog.csdn.net/aerchi/article/details/105062622

::: ❕
Vue CLI 现已处于维护模式!

现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。
:::