vue3 入门npm安装法简单笔记-CFANZ编程社区

vue3 入门npm安装法简单笔记

这里采用npm法

npm install cnpm -g
npm init vue@latest//通过左右键选择是否启用ts等
cd vlue-project
 npm install
 npm run dev

vue3 入门npm安装法简单笔记_笔记

image.png

实际代码架构

vue3 入门npm安装法简单笔记_前端_02

image.png

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

vue3 入门npm安装法简单笔记_笔记_03

image.png

vue3 入门npm安装法简单笔记_笔记_04

image.png

vscode运行和调试
选中main.ts
点击运行

vue3 入门npm安装法简单笔记_npm_05

image.png

选择node.js

vue3 入门npm安装法简单笔记_前端_06

image.png

将自动运行

vue3 入门npm安装法简单笔记_node.js_07

image.png

修改代码后，发现会自动变化。

或者在不选择任何文件的情况下，选择run node.js,然后会提示run dev .，

务必先进行 npm instlal

参考 https://www.runoob.com/vue3/vue3-create-project.html

固定端口
vite.config.ts中

/// <reference types="vitest" />

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  server: {
    port: 3333,
  },
  preview: {
    port: 3333
  },

或者在package.json中

"scripts": {
    "serve": "vite preview --port 6000"
  },

0 条评论