Vue3入门

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

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

安装:

1. 安装完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 设置的执行策略 默认情况下 是禁止运行脚本

1. 用管理员的身份打开powershell
   
2. 重新设置它的执行策略: 输入 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': '',//重写路径
        }
      }
    }
  }
})