VSCode新建Vue项目

前言

Vue.js 是一款流行的 JavaScript 前端框架,它可以帮助开发者轻松构建高性能、可扩展的 Web 应用程序。而 VSCode 则是一款功能强大的开源代码编辑器,它提供了许多有用的工具和插件,可以大幅提高开发效率。

在本文中,我们将介绍如何使用 VSCode 来创建一个全新的 Vue.js 项目。我们将从安装必要的软件开始,一步步地引导您完成整个过程。同时,我们还将分享一些有用的技巧和建议,以帮助您更好地利用 VSCode 和 Vue.js 来开发 Web 应用程序。

接下来,让我们开始吧!

一、环境配置

1、node.js

Node.js 是一款基于 Chrome V8 引擎的 JavaScript 运行时,可以在服务器端运行 JavaScript 代码。在安装 Node.js 之前,您需要确定您的系统是否已经安装了 npm(Node 包管理器),因为它是 Node.js 的默认软件包管理工具。

以下是在 Windows、macOS 和 Linux 上安装 Node.js 的步骤:

在 Windows 上安装 Node.js:

  1. 访问 Node.js 的官方网站 https://nodejs.org/,下载最新的 Windows 版本的安装程序。
  2. 运行下载的安装程序,并按照提示完成安装。
  3. 在安装过程中可以选择自定义安装路径,也可以使用默认路径。

在 macOS 上安装 Node.js:

  1. 使用 Homebrew 安装 Node.js,打开终端并输入以下命令:brew install node
  2. 等待安装完成即可。

在 Linux 上安装 Node.js:

  1. 在终端中输入以下命令以添加 Node.js 源:curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
  2. 安装 Node.js:sudo apt-get install -y nodejs

安装完成后,您可以在终端输入 node -v 命令来检查 Node.js 是否已经成功安装。如果显示了 Node.js 的版本号,则说明安装成功。同时,您还可以使用 npm -v 命令来检查是否已经安装了 npm。

输出:node -v 检查

2、安装配置脚手架vue-cli

要安装并配置 Vue 项目的脚手架 vue-cli,您可以按照以下步骤进行操作:

  1. 首先,确保您已经成功安装了 Node.js 和 npm。您可以在命令行中分别输入 node -vnpm -v 来验证它们的安装情况。

  2. 接下来,使用 npm 安装 vue-cli。在命令行中执行以下命令:

    java 复制代码
    npm install -g @vue/cli

    这将全局安装 Vue 的命令行工具。安装完成后,您就可以在命令行中访问 vue 命令。

  3. 确认 vue-cli 是否安装成功。在命令行中执行以下命令:

    java 复制代码
    vue --version

    如果显示了 vue-cli 的版本号,则说明安装成功。

  4. 创建一个新的 Vue 项目。在命令行中执行以下命令:

    java 复制代码
    vue create my-vue-project

    这将引导您通过创建一个新的 Vue 项目的过程,在过程中您可以选择使用默认预设或手动选择特性来配置项目。

  5. 进入到新创建的项目目录中:

    java 复制代码
    cd my-vue-project
  6. 启动开发服务器。在命令行中执行以下命令:

    java 复制代码
    npm run serve

    这将启动一个开发服务器,并在命令行中显示访问该服务器的 URL 地址。

这样,您就成功安装并配置了 Vue 项目的脚手架 vue-cli。现在,您可以开始编写 Vue 组件和页面,进行开发工作了。

3、安装 @vue/cli-init 全局插件

为了避免权限问题,可以按照以下步骤来解决此问题:

1。打开 PowerShell 命令行界面。

1)打开开始菜单,找到 "Windows PowerShell"。

2)在 "Windows PowerShell" 上右键单击,并选择 "以管理员身份运行"。

2.在 PowerShell 窗口中,输入以下命令并按 Enter 键:

java 复制代码
npm install -g @vue/cli-init

这会全局安装 @vue/cli-init 插件。

3.安装完成后,再次运行您之前的命令:

javascript 复制代码
vue init webpack work1

现在应该能够正常执行 vue init 命令,而不再收到该错误提示。

请注意,如果您之前已经安装了 @vue/cli-init 插件,可能需要更新为最新版本。您可以使用以下命令来更新插件:

java 复制代码
npm update -g @vue/cli-init

二、创建vue项目

1.命令方式创建

这个命令是用于使用Vue CLI创建一个新的基于Webpack模板的Vue.js项目。具体来说:

  • vue init 是Vue CLI提供的命令,用于初始化一个新的Vue.js项目。
  • webpack 是指定使用Webpack作为项目的构建工具和打包工具,这意味着项目将会基于Webpack模板创建。
  • work1 是你为项目指定的名称,也是新创建的项目的目录名称。

通过执行这个命令,Vue CLI会引导你完成一系列的配置选项,如项目名称、描述、作者等,然后自动生成一个基于Webpack模板的Vue.js项目的基本结构和配置文件。这样你就可以在这个基础上开发你的Vue.js应用了。

java 复制代码
vue init webpack work1

运行之后的结果

java 复制代码
? Project name project
? Project description A Vue.js project
? Author qiu <qiu5557@qq.com>
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "work1".

这些信息说明了项目的名称、描述、作者、Vue.js 构建方式、是否安装了 vue-router、是否使用 ESLint 进行代码检查、选择的 ESLint 预设、是否设了单元测试、选择的测试运行器、是否设置了端对端测试,以及项目创建后是否自动运行 npm install 来安装依赖。

如果使用 npm run dev 报错的话

We will use "npm" to install the CLI via "npm install -D webpack-cli".

Do you want to install 'webpack-cli' (yes/no): y

Installing 'webpack-cli' (running 'npm install -D webpack-cli')...

就是用 npm install 命令安装。

2.重新初始化依赖

(1)按照上图的提示,cd 到刚才项目目录

(2)执行npm cache clean --force 清除缓存

(3)执行npm install 重新初始化依赖。

3、启动项目

点击http://localhost:8080 能够跳到这个网页就表示成功了

相关推荐
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
叶知安2 小时前
如何用pycharm连接sagemath?
ide·python·pycharm
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
十一吖i2 小时前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年2 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
熊的猫4 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
会发光的猪。4 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
mosen8684 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
lucky九年5 小时前
vscode翻译插件
ide·vscode·编辑器