vue.js 3 初学经验

Windows 11

x86_64

node: '20.11.1'

npm: '10.2.4'

--

cnpm@9.4.0：npm@9.9.2，node@20.11.1

--

vue@3.4.21

vite@5.2.8

--

nginx-1.20.0 on Windows

--

 

序章

作者 是 前端开发入门选手，最近在学习 Vue 3，遇到了不少问题，特整理到本文。

如有错漏，还请不吝指正。

 

教程选择

官方文档

https://cn.vuejs.org/guide/introduction.html

最新版本：

vue@3.4.21。

 

官方文档：示例

https://cn.vuejs.org/examples/

有很多代码可以参考，强烈。

 

菜鸟教程：Vue3 教程

https://www.runoob.com/vue3/vue3-tutorial.html

本教程基于 Vue 3.0.5 版本测试。

说明，

作者的入门教程。

版本比较旧，教程中的一些内容已经过时了，比如，“Vue3 安装 > 使用图形化界面 > vue ui 命令”。

 

可以先基于 菜鸟教程 了解基本概念，耗时1天左右。

然后，基于 官方文档做进一步学习 和 实践。

 

学习前提

基本级

  1. HTML
  2. CSS
  3. JavaScript

 

入门级

  1. Node.js（npm、cnpm）
  2. Webpack
  3. Vite

 

专业级

  1. ECMAScript 6（ES 6）
  2. TypeScript
  3. Webpack 高级
  4. Vite 高级

 

安装、使用方式

<script> 标签 导入：不建议

将 vue 的 js 文件下载下来，或者，使用 CDN。

示例：

<script src="https://cdn.staticfile.net/vue/3.0.5/vue.global.js"></script>

（强烈）不建议。

后续使用会遇到很多问题。

开始是 导入一个 vue 的包，随着开发的进行、需求的增多，就需要导入许许多多的包，一个一个去找，真的累死人。

 

npm 方法：建议

首先，安装 node.js，安装后，就可以使用 npm 命令了。

npm version 查看 版本信息：

 

本文使用该方法开发项目。

 

npm 常用命令

搜索包：npm search vue

查看包详情：npm view vue

安装包：npm install vue，后面会用到。

 

更多命令暂未用到。 

 

cnpm 命令

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm。

安装 cnpm：

npm install cnpm -g

npm install -g cnpm --registry=https://registry.npmmirror.com

npmmirror 镜像站

https://npmmirror.com

 

API风格偏好

选项式

TypeScript 与 选项式 API

组合式

TypeScript 与 组合式 API

X

HTML

单文件组件

……

风格比较

来自 官方文档示例。

选项式+HTML 组合式+HTML 选项式+单文件组件 组合式+单文件组件

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script type="module">
import { createApp, ref } from 'vue'

createApp({
  setup() {
    // “ref”是用来存储值的响应式数据源。
    // 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中，
    // 但是在下一个示例中更改这个值的时候，我们就需要它了。
    const message = ref('Hello World!')

    return {
      message
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<template>
  <h1>{{ message }}</h1>
</template>

<script setup>
import { ref } from 'vue'

// “ref”是用来存储值的响应式数据源。
// 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中，
// 但是在下一个示例中更改这个值的时候，我们就需要它了。
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

作者 不懂 TypeScript，就不展示代码了。

在上面四种风格中，作者 推荐使用 组合式+单文件组件。

当然，组合式+HTML 也有其用途，作者未用过。

 

集成开发工具（IDE）

visual studio code

插件：VUE-OFFICIAL

 

创建 vue.js 3 项目

官方文档：快速上手

https://cn.vuejs.org/guide/quick-start.html

 

1）进入工作目录

D:\WS\nodejs\day3>

2）npm create vue@latest

做各种选择。

其中，Vue Router、Pinia 可以选择 “是”。

下面的项目都选择 否：

项目创建完成。

新建了 项目文件夹 vuequicks：

其中，package.json 文件内容如下。

package.json 
{
  "name": "vuequicks",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.1.6"
  }
}

 

3）npm install

安装。

解释：

执行命令：npm help install，打开网页。

Install a package。

This command installs a package and any packages that it depends on. If the package has a package-lock, or an npm shrinkwrap file, or a yarn lock file, the installation of dependencies will be driven by that, respecting the following order of precedence:

npm-shrinkwrap.json
package-lock.json
yarn.lock

执行：

安装成功。

安装后，项目目录下多了：

  1. node_modules 文件夹
  2. package-lock.json 文件

 

4）npm run dev

访问 http://localhost:5173 ：

访问成功，页面如下。

没有更多操作，只是一些外部链接，要是 create 时 选择了 Vue Router，会有更多操作。

 

5）VSCODE 打开项目

index.html 页面：

用了

src 下的 main.js：

用了

src 下的 App.vue：

用了

src/components 目录 下的 2个组件（略）。

 

vscode 中的 终端（terminal）

默认终端 时 powershell 的，可以更换为 Command Prompt 的，后者可以执行 cnpm 命令。

powershell 下执行 cnpm 命令 失败（作者对 powershell 不熟）：

 

部署项目到 nginx

nginx 是 本机 Windows 上的。

1）npm run build

打包项目。

打包后多了个 dist 目录。

注意，

直接在浏览器打开 这个 index.html，是不对的（需要修改相关assets 文件路径才行——绝对路径改为相对路径）。

2）配置 nginx 指向 dist 目录

server>root 配置为 dist。

server {
    listen       80;
    listen       [::]:80;
    server_name  _;
    # 错误写法：反斜杠
    #root         D:\WS\nodejs\day3\vuequicks\dist;
    # 正确写法：斜杠
    root         D:/WS/nodejs/day3/vuequicks/dist;

访问：http://localhost，失败。可通过修改配置解决（本文 暂不处理）。

访问：http://localhost/index.html，成功，页面同 npm run dev 时。

 

说明，

将 vue项目 打包后 部署到云端服务器，可以使用 scp 命令 或 其它方式拷贝过去。

 

常用软件包

elemen-plus

两个包：elemen-plus 和 element-plus/icons-vue。

和 vue 3.0 配合的 UI。

相关地址：

https://element-plus.org 可能访问较慢，比如，晚间。

https://element-plus.gitee.io 240408 遇到了 访问错误（503 Service Temporarily Unavailable），刷新后一般正常了。

 

element-plus/icons-vue 是一些图标的使用，在 组合式 风格中使用可以参考下面的代码：

// main.js 文件

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import * as ElementPlusIconVue from '@element-plus/icons-vue'
 
app.use(ElementPlus)

// 全局注册
for (const [key, component] of Object.entries(ElementPlusIconVue)) {
    app.component(key, component)
}

参考博文如下：

Vue3引入Element Plus的Icon
帅帅气气的黑猫警长
已于 2022-09-18 17:18:29 
https://blog.csdn.net/Hao_ge_666/article/details/126919944

 

vue-router

可以在 创建时 选择，也可以 创建后安装。

官网：

https://router.vuejs.org

 

pinia

两个包：pinia 和 pinia-plugin-persistedstate。

状态管理，比如，登录状态。

状态持久化，比如，存储到浏览器的 localStorage、sessionStorage。

官网：

https://pinia.web3doc.top

 

axios

发送http请求。
 
官网：

Promise based HTTP client for the browser and node.js。

 

 

Moment.js

官网：

https://momentjs.cn

在 JavaScript 中解析、校验、操作、显示日期和时间。

 

本文涉及命令

  1. npm search vue
  2. npm view vue
  3. npm install vue
  4. npm install cnpm -g
  5. npm install -g cnpm --registry=https://registry.npmmirror.com
  6. npm create vue@latest
  7. npm install
  8. npm run dev
  9. npm run build
  10.  

 

---END---

ben发布于博客园

本文链接：

https://www.cnblogs.com/luo630/p/18123020

ben发布于博客园

参考资料

1、Vue3引入Element Plus的Icon
帅帅气气的黑猫警长
已于 2022-09-18 17:18:29 
https://blog.csdn.net/Hao_ge_666/article/details/126919944

2、一个登录案例学会 Pinia
2022-10-24

https://developer.aliyun.com/article/1058104

参考之进行了练习，遇到了错误，实例化 存储时异常：文件 store/index.js 导致的。

最终参考官文解决，直接写在 main.js 中。

3、

 

 

ben发布于博客园

ben发布于博客园

 

posted @ 2024-04-09 13:14  快乐的总统95  阅读(57)  评论(0)  编辑  收藏  举报