Skip to content

Latest commit

 

History

History
158 lines (132 loc) · 5.06 KB

vue.md

File metadata and controls

158 lines (132 loc) · 5.06 KB
Raw

1. Quick Start

1.1. 初始化项目

  1. 安装vue：
npm install vue
npm install -g @vitejs/create-vite
  • 第一句是安装vue，vue是vite的依赖。
  • 第二句是安装vite脚手架工具，-g表示全局安装(该命令可选)。
  1. 创建名为vue_front的项目：
npm create vite vue_front
  • 也可以写为npm create vite@latest vue_front。
  1. 安装依赖：
cd vue_front
npm install
npm run dev
  • npm install卡住时或者报错npm error code E404，可以尝试npm cache clean --force，然后再次npm install。 还可以尝试从默认值npm config set registry https://registry.npmjs.org/改为npm config set registry https://registry.npmmirror.com设置淘宝镜像源。可以使用npm config get registry查看当前镜像源。
  • npm后面可以加上--force参数(强制安装)或者--legacy-peer-deps参数(忽略依赖检查)。
  1. 安装其他的依赖(可选)：
npm install vue-router
npm install pinia
npm install axios
npm install element-plus
npm install -D sass sass-loader
  • 这五个的功能分别是：路由、状态管理、网络请求、UI库、样式处理。
  1. 参考资料：

1.2. Usage

  1. 组件之间的数据传递：
  • 父传子：通过props传递。
  • 子传父：通过emit传递。
  • 兄弟组件：通过bus传递。

ParentComponent.vue:

<template>
  <div>
    <p>父组件数据: {{ parentMessage }}</p>
    <ChildComponent :message="parentMessage" @updateMessage="updateParentMessage" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello from Parent');

function updateParentMessage(newMessage) {
  parentMessage.value = newMessage;
}
</script>

ChildComponent.vue:

<template>
  <div>
    <p>从父组件接收到的数据: {{ message }}</p>
    <input v-model="childMessage" placeholder="更新父组件的数据" />
    <button @click="sendUpdate">更新父组件</button>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps(['message']);
const emit = defineEmits(['updateMessage']);

const childMessage = ref('');

function sendUpdate() {
  emit('updateMessage', childMessage.value);
}
</script>

上面的原理是：

  • ChildComponent通过props接收ParentComponent传递的数据，点击按钮后通过emit将数据传递给ParentComponent。

细节是：

  • :表示传递数据，@表示接收数据。v-model是双向绑定，@click是点击事件。
  • 父组件里使用:message表示传递数据且变量名为message，子组件里使用const props = defineProps(['message']);表示接收数据且变量名为message。
  • 子组件里使用const emit = defineEmits(['updateMessage']);表示发送数据且事件名为updateMessage，父组件里使用@updateMessage="updateParentMessage"表示接收数据且事件名为updateMessage。

2. Vue里渲染markdown

  1. 安装marked：
npm install marked
npm install marked @types/marked highlight.js
npm install highlight.js
npm install vue-markdown
npm install github-markdown-css
npm install katex
npm install --save-dev @types/katex

其中vue-markdown依赖于marked和highlight.js。katex的第二个导入是为了在ts文件中使用katex。

  1. 导入：
import {marked} from 'marked';
import hljs from 'highlight.js';
// import 'highlight.js/styles/github.css';
import "github-markdown-css"

注意不是import marked from 'marked';，很多gpt都给错了。

3. 服务器部署

https://free.aliyun.com/?spm=5176.28623341领取阿里云服务器。 https://ecs.console.aliyun.com/server/i-bp1ddbura4iyenuwu8r6/detail?regionId=cn-hangzhou#/进入阿里云服务器控制台。 https://ecs-workbench.aliyun.com/?spm=5176.ecscore_server.0.0.43aa4df5Ps5W6S&form=EcsConsole&instanceType=ecs&regionId=cn-hangzhou&instanceId=i-bp1ddbura4iyenuwu8r6&resourceGroupId=&language=zh进入阿里云工作台。 输入以下命令

ssh root@120.55.80.92
sudo yum update -y
sudo yum install nginx -y
sudo yum install mysql-server -y
sudo yum install php-fpm php-mysqlnd -y

每一句命令对应的意思是：

  • 连接到服务器，这里使用的ip是公网ip。
  • 更新服务器。
  • 安装nginx。
  • 安装mysql。
  • 安装php。
sudo systemctl start nginx
sudo systemctl enable nginx
sudo systemctl start mysqld
sudo systemctl enable mysqld
sudo systemctl start php-fpm
sudo systemctl enable php-fpm

这些命令的意思是：启动nginx、mysql、php，并且设置开机自启动。 https://wanwang.aliyun.com/domain/searchresult/?domainCartTradeParams=dr_29379033_1724916831878&spm=5176.29379033.J_fUNSUVBzhRP-3yTOu3xXF.domain-just-search&keyword=azusa&suffix=.net.cn域名采购。