Vue 环境安装以及项目创建

环境安装

nodejs 安装

下载地址:https://nodejs.org/dist/v18.16.1/

根据系统类型选择对应安装包,选择安装路径那个后一直下一步即可安装完成。

配置npm 代理镜像,设置为淘宝的镜像地址(后面按照依赖可以加速下载安装包)

复制代码
npm config set registry https://registry.npmmirror.com

安装cnpm (可选)

复制代码
npm install -g cnpm --registry=https://registry.npmmirror.com

查看是否安装成功

项目创建并启动

cmd 进入需要创建vue工程的目录下,输入如下命令并执行

复制代码
npm init vue@latest

第一次我们可以在输入项目名称后其他选项都默认选择否(项目名称都使用小写字母)

然后执行提示命令进行启动:

复制代码
  cd vue-base  进入到vue工程根目录下
  npm install  安装工程所需要的依赖
  npm run dev  启动vue工程

到这里项目启动完成,浏览器访问 http://localhost:5173/ 即可打开vue项目页面

这里的VITE 为vue的一个脚手架工具,在vue早前一些版本 使用的为webpacke脚手架工具。

项目目录

复制代码
.idea 										--- 开发工具的配置文件夹(默认创建出来的为 .vscode)
node_modules 						--- Vue项目的运行依赖文件夹
public										--- 资源文件夹(如包含浏览器图标)
src											---源码文件夹
.gitignore									---git忽略文件
index.html								---入口HTML
package.json							---信息描述文件
README.md							---项目介绍文件
vite.config.js							---Vue配置文件
相关推荐
三天不学习几秒前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
苹果酱05674 分钟前
Golang标准库——runtime
java·vue.js·spring boot·mysql·课程设计
滿8 分钟前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧19 分钟前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快27 分钟前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
Double Point28 分钟前
(三十一) Dart 中的网络请求教程:从知乎日报 API 获取数据
前端
excel30 分钟前
webpack 核心编译器 十二 节
前端
好_快30 分钟前
Lodash源码阅读-baseToString
前端·javascript·源码阅读
好_快30 分钟前
Lodash源码阅读-initCloneByTag
前端·javascript·源码阅读
木木黄木木33 分钟前
HTML5重力球动画实现详解
前端·html·html5