Vue环境的配置及语法检查(VsCode)

吐槽一下,可以下滑直接正文

我的webstorm又双叒叕的不能用了,都已经频繁到每日激活码了,还是给我封封封的。

听说可以申请教育版,但是貌似我们学校不可以,就很气。

好吧,转战VsCode。

不是说VsCode不香,因为平时工作的环境用的vscode,vue的项目格式化的配置又不同于工作中的要求,加上vue的学习习惯,博主果断选择双环境,最后还是没能抗住贫穷。

改用Vscode,少不了配置一波。幸好vue初始化项目的配置文件很完整,只需要做一些改动就可以。

正文:

  1. 安装插件。参考各位大佬的博客,装了EslintVetur
  2. 接着又参考各种配置文件,Vetur一直没有作用,咱也不知道是个啥情况。果断方案二
  3. 在项目根目录下创建.prettierrc.json,添加下面内容
    {
      "tabWidth": 2,
      "useTabs": false,
      "singleQuote": true,
      "semi": false,
      "trailingComma": "none"
    }
    
  4. 到这里,项目是可以绿码跑过了。解决了,最后一行的尾随符号,结尾分号,Tab大小等问题
  5. 然后开始Eslint的配置,毕竟没有红波浪,心里挺没谱
  6. 安装后发现配置文档的设置,项目初始化的时候做好了,但是红波浪还是没有出来
  7. 随便打开一个Vue文件,看看右下角,把Eslint的禁用打开。Allow就可以了。
  8. 再看看,红波浪是不是有了。
<think>首先,用户的问题是关于在VSCode中进行Vue安装、环境配置并创建项目的教程。用户提供了三个参考资料,我需要参考这些引用,但引用不是用户真正的需求,而是辅助信息。我必须整合这些信息,并根据系统指令生成相关内容。 系统指令回顾: - 所有行内数学表达式必须使用 `$...$` 格式。 - 独立公式必须使用 `$$...$$` 格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识,如 [^1]。 - 回答结构清晰,帮助用户逐步解决问题。 - 尽量保证回答真实可靠。 用户的问题集中在 VueVSCode 中的安装、配置和创建项目,所以我的回答应聚焦于此。 引用内容摘要: - [^1]: 提到安装 node.js、配置淘宝 cnpm 镜像、安装 vue-cli、VSCode 安装插件、使用 vue-cli 构建项目、启动 vue-element-admin。 - [^2]: 详细描述了安装 Node.js 的过程(包括下载、安装步骤、环境变量配置)、安装 VSCode、全局安装 vue-cli 和 webpack、创建项目命令(vue init webpack myvue)。 - [^3]: 提到检查 npm 镜像、安装 @vue/cli、创建存储文件夹、使用 vue create 命令创建项目,选择 Vue 版本或自定义。 我需要整合这些步骤,形成一个连贯的教程。关键步骤包括: 1. 安装 Node.js(用于 npm)。 2. 配置 npm 镜像(可选,加速下载)。 3. 安装 Vue CLI(命令行工具)。 4. 安装 VSCode 和相关插件。 5. 创建 Vue 项目。 6. 启动项目。 Vue CLI 的创建命令有两种方式:旧版的 `vue init webpack project-name` 和新版的 `vue create project-name`。引用中提到了两种,[^2] 使用旧版,[^3] 使用新版。我应该推荐使用新版的 `vue create`,因为它更现代和标准。 回答结构: - 结构清晰,逐步解决问题。 - 包括安装、配置、创建项目的完整流程。 - 使用中文。 - 在适当的地方添加引用标识,虽然引用是提供的,但我需要自然地引用它们。 生成相关问题: - 在回答的最后,添加相关问题部分。 LaTeX 使用:由于问题涉及编程,可能不需要数学表达式。但如果提到版本号或路径,可以用行内格式,如 `$npm -v$`。确保如果使用数学,正确格式化。 步骤规划: 1. **安装 Node.js:** 下载并安装 Node.js,因为它包含 npm。引用 [^2] 有详细步骤。 2. **配置 npm 镜像(可选):** 使用淘宝镜像加速安装,如 `npm config set registry https://registry.npmmirror.com`。引用 [^3] 提到这个。 3. **安装 Vue CLI:** 全局安装 Vue CLI。新版本是 `@vue/cli`,所以命令是 `npm install -g @vue/cli`。引用 [^2] 和 [^3] 都有。 4. **安装 VSCode:** 下载并安装 VSCode。引用 [^2] 提到。 5. **安装 VSCode 插件:** 推荐安装 Vue 相关插件,如 Volar。引用 [^1] 提到。 6. **创建 Vue 项目:** 使用 `vue create project-name` 命令创建新项目。引用 [^3] 使用这个。 7. **启动项目:** 进入项目目录,运行 `npm run serve` 来启动开发服务器。 完整教程: - 分步解释每个操作。 - 在代码块中放置命令。 - 自然地添加引用。 最后,生成相关问题,如关于常见问题、优化或进阶配置。 回答结构: - 引言:briefly state what we'll cover. - Step-by-step guide. - 总结。 - 相关问题。 确保引用:在描述步骤时,如果直接来自引用,添加 [^1], [^2], or [^3] at the end of relevant sentences. But since the references are provided, I should attribute appropriately. 问题中的引用是: - [^1]: VScodevue的安装及项目的搭建... - [^2]: VSCode中搭建VUE项目教程... - [^3]: Vscode创建vue项目教程... 在回答中,我会提到这些作为参考。 </think>### VSCode 中进行 Vue 安装、环境配置及创建项目的教程 要在 VSCode 中安装 Vue.js、配置环境并创建项目,需要完成以下步骤。整个过程依赖于 Node.js(提供 npm 包管理器)和 Vue CLI(命令行工具)。下面是详细的逐步教程,基于可靠的开发实践整理而成[^1][^2][^3]。 #### 1. **安装 Node.js(必需环境)** Node.js 是运行 Vue 项目的基础,包含 npm(Node Package Manager)。 - **下载 Node.js**:访问 [Node.js 官网](https://nodejs.org/en/download/) 下载安装包(推荐 LTS 版本)。 - **安装步骤**: - 双击安装文件,按向导操作(点击 "Next",勾选协议,使用默认路径)。 - 安装完成后,检查环境变量:打开命令行(Win+R 输入 `cmd`),执行 `node -v` 和 `npm -v`。若能显示版本号(如 `$v18.17.1$`),则 Node.js 安装成功[^2]。 - **配置镜像加速(可选)**: 国内用户可设置淘宝镜像提升下载速度: ```bash npm config set registry https://registry.npmmirror.com ``` 验证是否成功:运行 `npm config get registry`,显示 `https://registry.npmmirror.com` 即可[^3]。 #### 2. **安装 Vue CLI(项目构建工具)** Vue CLI 是官方脚手架,用于快速创建 Vue 项目。 - **全局安装**:在命令行中运行: ```bash npm install -g @vue/cli ``` 安装后验证:执行 `vue --version`,显示版本号(如 `$5.0.8$`)即成功[^3][^2]。 - **安装 VSCode**:如果未安装 VSCode,从[官网](https://code.visualstudio.com/Download)下载并运行安装文件[^2]。 #### 3. **配置 VSCode 插件** 打开 VSCode,安装以下必备插件(提升开发效率): - **Volar**:Vue 3 官方语言支持工具(搜索 "Volar" 安装)。 - **ESLint**:代码规范检查(搜索 "ESLint" 安装)。 - **Prettier**:代码格式化工具(搜索 "Prettier" 安装)。 插件安装后,重启 VSCode 生效[^1]。 #### 4. **创建 Vue 项目** 在 VSCode 中创建新项目: - **打开终端**:在 VSCode 中按 `Ctrl+`` `(或顶部菜单 Terminal > New Terminal)。 - **创建项目目录**:建议新建一个文件夹(如 `vue-projects`),拖拽到 VSCode 资源管理器中。 - **运行创建命令**:在终端中执行: ```bash vue create my-vue-project ``` - 这里 `my-vue-project` 是项目名,可自定义。 - **选择配置**: - 根据需要选择预设(例如:"Default (Vue 3)" 或 "Manually select features")。 - 手动选择时,用空格键勾选所需功能(如 Babel、Router、Vuex),回车确认[^3]。 - **等待安装**:Vue CLI 会自动下载依赖包(耗时几分钟)。 #### 5. **启动和验证项目** - **进入项目目录**:在终端运行: ```bash cd my-vue-project ``` - **启动开发服务器**:执行: ```bash npm run serve ``` - 终端显示本地 URL(如 `http://localhost:8080`),打开浏览器访问该链接。 - 若看到 Vue 欢迎页面,说明项目创建成功[^1][^3]。 #### 总结 以上步骤涵盖了 VueVSCode 中的完整安装、配置和项目创建过程。整个过程依赖 Node.js 环境(步骤 1),通过 Vue CLI 简化开发(步骤 2-4),并使用 VSCode 插件提升体验(步骤 3)。常见问题包括 npm 镜像配置失败或依赖冲突,建议检查网络环境或重装依赖[^2][^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值