前端流行框架Vue3教程:1. Vue开发(安装、开发环境和目录结构)

1. Vue开发前的准备

前提条件

熟悉命令行已安装15.0 或更高级版本的Node.js

(1) 安装Node.js

  • 官网直接下载:https://nodejs.org/
  • 安装node.js
  • 安装淘宝镜像记录:管理员运行cmd
# 如果是mac,需要加sudo
npm install cnpm -g --registry=https://registry.npm.taobao.org
  • 这时候如果有些人会报错,证书过期不能访问之类的
    需要加上
npm config set strict-ssl false

(1)创建Vue项目

npm init vue@latest

如果安装很慢,或者提示带有 proxy 之类的错误,可以切换镜像:

  • 查看当前镜像源,输入命令:
npm config get registry
  • 切换当前镜像源为下面的镜像:
npm config set registry https://registry.npmmirror.com
  • 清除npm 内缓存:
npm cache clean --force
  • 重新安装install即可(会非常快)~~~~

安装后会有下列提示,除了创建名称外,其他的暂时选否。用到的时候再安装

看绿色提示,我们操作下:

# 进入项目目录
cd vue-project
# 我们这里不用npm install,cnpm比较快
cnpm install
# 运行项目
npm run dev

我们就看到项目创建运行成功了

(2)开发环境

推荐的是IDE配置是Visual Studio Code+Vue - Official扩展

我们打开项目看下

(3)Vue项目目录结构

原文链接:,转发请注明来源!