VS Code安装使用VUE

用户668859984766
7 阅读3分钟

准备环境：安装Node.js

官网下载：nodejs.org/

-选LTS长期支持版（>=18.x）

安装后，打开终端（CMD/PowerShell）验证：

node -v #查看版本
npm -v

VS Code安装插件（Vue3）

打开VS Code→拓展面板（Ctrl+Shift+X），安装：

核心（必须）

  • Vue - Official
    • Vue3官方语法高亮、智能提示、组件跳转、TS支持
    • 禁用旧插件Vetur（而这冲突）
  • TypeScript Vue Plugin（Volar）
    • 强化Vue+TS类型检查

效率推荐

  • ESLint：代码规范检查
  • Prettier：自动格式化
  • Vue VSCode Snippets：Vue代码快速片段
  • Auto Rename Tag：同步修改HTML/Vue标签名

创建Vue3项目（Vite方式，推荐） 最新官方推荐用Vite代替旧的Vue CLI

  1. VS Code打开终端：'Ctrl+'或菜单【终端→新建终端】

  2. 执行创建命令

    npm create vue@latest

  3. 按提示选择：

  • 项目名：my-vue-app(自定义)
  • TypeScript：按需（新手建议NO）
  • JSX、Vue Router、Pinia、ESLint、Prettier：按需开启
  1. 进入项目&安装依赖
    cd my-vue-app
    npm install

运行与开发

  1. 启动开发服务器

    npm run dev

  • 终端会显示地址：http://localhost:5173/
  • 浏览器打开即可看到Vue欢迎页
  • 热更新：修改代码自动刷新页面
  1. 项目结构（简单说明）
├── src/
│ ├── components/ # 组件 
│ ├── App.vue # 根组件 
│ └── main.js # 入口 
├── index.html 
└── package.json
  1. 编写Vue组件（.vue文件）

示例:src/components/Hello.vue:

<template> 
    <h1>{{ msg }}</h1> 
    <button @click="count++">点我：{{ count }}</button> 
</template>

<script setup> 
import { ref } from 'vue' 
const msg = ref('Hello Vue!')
const count = ref(0)
</script> 

<style scoped>
h1 { color: #42b983; }
</style>
  1. 常用命令
npm run dev # 开发模式（热更新） 
npm run build # 生产打包（生成 dist/） 
npm run preview # 预览打包结果
  1. 常见问题
  • Volar不生效
    • 确保禁用Vetur
    • 重启VS Code
    • 右键.vue文件→【打开方式】→选择vue
  • 端口被占用
    • 修改vite.config.js：
export default defineConfig({ 
    server: { port: 3000 } 
})
  • Windows系统禁止运行PowerShee脚本问题

具体报错

npm : 无法加载文件 D:\IDEA\Node_js\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请 
参阅 https:/[go.microsoft.com/fwlink/?LinkID=135170](https://go.microsoft.com/fwlink/?LinkID=135170) 中的 about_Execution_Policies。
所在位置 行:1 字符: 1 
+ npm run dev 
+ ~~~ 
    + CategoryInfo : SecurityError: (:) []，PSSecurityException 
        + FullyQualifiedErrorId : UnauthorizedAccess

解决方案： 在VS Code终端里输入

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

VUE开发入门

VUE核心思想时“声明式渲染”——简单来说就是：只关心数据，数据变了，页面自动变。

重点看三个文件：

  1. index.html:页面的“壳”，所有组件最终都渲染在这里。
  2. src/main.js:项目的“入口”，负责创建Vue应用实例。
  3. src/App.vue：根组件，所有页面组件的“父容器”。

编写第一个Vue页面（Hello World）

打开src/App.vue，清空里面所有内容，然后编写：

<template> 
    <!-- 1. 模板区：写 HTML 结构 --> 
    <div class="app">
        <h1>{{ msg }}</h1>
        <p>计数：{{ count }}</p> 
        <!-- 事件绑定：点击按钮修改 count -->
        <button @click="add">点我+1</button> 
    </div>
</template> 

<script setup>
// 2. 脚本区：写 JS 逻辑（Vue 3 推荐写法）
import { ref } from 'vue' 

// 定义响应式数据：数据变，页面自动变
const msg = ref('Hello, Vue 3!') 
const count = ref(0)

// 定义方法 
const add = () => { 
    count.value++ // 在 JS 里修改 ref 值，要加 .value
} 
</script>

<style scoped> 
// 3. 样式区：写 CSS（scoped 表示样式只作用于当前组件）
.app {
    text-align: center;
    margin-top: 50px; 
}
button { 
    padding: 8px 16px;
    cursor: pointer;
} 
</style>

确保终端运行npm run dev

浏览器打开http://localhost:5173/

核心概念拆解

  • {{ msg }}:插值语法，把JS数据渲染到页面。
  • @click:事件绑定，监听用户点击。
  • ref：响应式数据，这是Vue的灵魂。你把count从0改成1，页面上的数字会自动更新，不需要你手动去修改DOM。

Vue基础指令

  1. 指令（Directives）
  • v-if / v-show:控制元素显示/隐藏（v-if时销毁/创建，v-show时切换css）
  • v-for：循环渲染列表，比如渲染一个数组。

<li v-for="item in list" :key="item.id">{{ item.name }}</li>

  1. 组件化（Components）
  • 把页面拆分成多个独立的.vue文件（如Header.vue、Footer.vue），复用代码，便于维护。
  • 简单示例：新建src/components/HelloWorld.vue,写一个组件，然后再App.vue中导入使用。
  1. 生命周期（Lifecycle）
  • Vue组件从创建到销毁会经理一系列阶段，你可以在特定阶段执行代码（如onMounted,组件挂在后请求数据）
avatar
文章
阅读
粉丝