vue3项目搭建完整步骤(vue3项目创建并运行)

使用brew命令行进行下载安装指定版本:,我来为大家讲解一下关于vue3项目搭建完整步骤?跟着小编一起来看一看吧!

vue3项目搭建完整步骤(vue3项目创建并运行)

vue3项目搭建完整步骤

vue搭建准备环境
  • npm
  • node
  • webpack
  • vs code
npm

使用brew命令行进行下载安装指定版本:

brew install npm

查看版本号:

$ npm -v 8.15.0

Node

进入官网nodejs,根据自己电脑的版本进行下载安装,如果是mac电脑,可以直接使用brew命令行进行下载。安装指定版本号:

brew install node@16

安装完成后,使用node -v的命令查看版本号,本地使用的版本是:16.15.1

$ node -v v16.15.1

webpack

JavaScript 应用程序的 静态模块打包工具

vsCode

官网根据当前系统版本直接下载安装

  • 安装插件:
    • vetur:语法、语义高亮
创建一个 Vue 应用
  • 前提:已安装 16.0 或更高版本的 Node.js

vue3官网示例步骤:

  • 打开命令行终端
  • 在终端cd到想要创建项目的目录,本次在桌面创建: cd Desktop
  • npm安装最新版本vue:npm init vue@latest
  • 这个指令会安装并执行创建vue的项目,项目名称为:vue-demo,它是 Vue 官方的项目脚手架工具。
  • 在安装过程中,会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

整体项目不确定是否要开启某个功能,则可以直接按下回车键选择 No。在项目被创建后,通过以下步骤安装依赖并启动开发服务器:

cd vue-demo「进入创建的项目路径下」 npm install npm run dev

目录结构解读
  • node_modules:所有的相关依赖的文件夹,文件夹很大,不要移动。
  • src:源码文件,所有的源码都在该文件夹内。
  • package.json:通过该文件具体看项目有哪些依赖。

更多技术文章: https://qrcode.ceba.ceshiren.com/link?from=toutiao&name=toutiao&project_id=qrcode&author=Muller

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页