当前位置：首页 > news >正文

Vue3入门

news 来源：原创 2025/4/30 12:28:36

环境准备: node.js vscode or webstorm 哪个熟悉用哪个

这两个都是傻瓜式安装浏览器直接搜索下载即可

安装:

安装完node.js之后按住快捷键 win+R 打开命令提示符输入node 将显示版本信息

接着我们通过 vite 构建vue3工程优点:

轻量快速的热重载（HMR），能实现极速的服务启动
对 TypeScript、JSX、CSS 等支持开箱即用
真正的按需编译，不再等待整个应用编译完成

创建工程指令: 打开需要放置文件的路径比如我的是桌面上的Practice文件夹

输入cmd回车然后输入指令 npm create vue@latest 回车

这个项目名称可以使用它默认的(按回车) 也可以自己定义(只能是数字字母下划线中横线) 创建完了之后暂时选择第一个TypeScript 也就是直接按回车后面会讲其它的选项

此时我们的vue3工程就创建成功了

将刚刚的项目名称通过vscode打开此为项目结构

点击pakage.json这个文件右下角会提示下载这个插件点击install

打开终端

运行代码指令npm run dev

报错解决方法右击vscode的图标选择属性点击兼容性勾选以管理员身份打开

再次运行接着报错

解决方法：这是PowerShell 设置的执行策略默认情况下是禁止运行脚本

用管理员的身份打开powershell
重新设置它的执行策略: 输入 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser回车选择是

再次运行我这里会出现如下代码是因为没有进入项目目录中 cd Vue_demo1

OK啊又报了个vite不是内部或外部指令这时我们需要下个模块类似jar包

再次运行开始指令就可以成功啦

如果后面报 vite不是一个内部或外部指令啥的需要 npm -i install 下载相关的包

点击进入后可以看到如下的界面说明成功了

Vite 项目中，index.html 是项目的入口文件，在项目最外层
加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript
Vue3中是通过 createApp 函数创建一个应用实例
Vue3向下兼容Vue2语法

man.js文件

index.html文件

后续就可以正常地学习啦

感谢大家的观看希望可以帮到你们！

记录后续问题及解决方法
axios 发送请求时报错 ERR_FAILED 302(Found)

解决方法在vite.config.js中配置devServer 之后就可以解决跨域问题

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  // 此为新配置内容
  devServer: {
    proxy: {
      '/api': {
        target: 'https://p.3.cn/',
        changOrigin: true,//允许跨域
        // ws: true, // 是否启用websockets
        secure: false,//默认为true，是否需要携带安全证书，即https时，是需要的，设置成false就不用了
        pathRewrite: {
          '^/api': '',//重写路径
        }
      }
    }
  }
})