下载NODE

https://nodejs.cn/download/

解压之后将bin文件路径添加到环境变量中

验证NODE

问题解决

npm : 无法加载文件 D:\Myexe\node-v22.20.0\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies
。

PS D:\WebStudy\Vue_Study\xv_web> get-ExecutionPolicy
Restricted
PS D:\WebStudy\Vue_Study\xv_web> Set-ExecutionPolicy -Scope CurrentUser

位于命令管道位置 1 的 cmdlet Set-ExecutionPolicy
请为以下参数提供值:
ExecutionPolicy: RemoteSigned
PS D:\WebStudy\Vue_Study\xv_web>
PS D:\WebStudy\Vue_Study\xv_web>
PS D:\WebStudy\Vue_Study\xv_web> get-ExecutionPolicy
RemoteSigned
PS D:\WebStudy\Vue_Study\xv_web>

或者
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Bypass -Force

安装VUE

npm install -g @vue/cli

验证VUE

创建项目

vue create 项目名

#示例
vue create test

验证项目

npm run serve

打包项目

修改文件路径 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './'
})

npm run build

VUE安装TailwindCSS

npm install -D tailwindcss@3 postcss autoprefixer

npx tailwindcss init -p

修改配置tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

新建style.css

和main.js保持同级目录

@tailwind base;
@tailwind components;
@tailwind utilities;

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

createApp(App).mount('#app')