一、环境准备

1、安装node.js

推荐下载地址：https://nodejs.org/en/

2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

二、搭建vue环境

1、全局安装@vue/cli

推荐下载地址：https://cn.vuejs.org/

2、在命令行输入

npm install -g @vue/cli

3、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

三、创建vue项目

1、创建项目

（1）以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹，输入

vue create test_vue

（2）做一些配置：

（3）按方向键选中该项，然后按回车键：

（4）按空格键按照如下进行配置：

（5）选择vue版本，我选的是3.x

（6）是否要保存为这个项目作为一个模板保存？

（7）出现以下界面，项目创建成功：

四、启动vue项目

1、命令行界面启动

（1）跳转到以下界面，默认为8080端口，我的8080端口被占用，所以启动了8081端口。

（2）打开浏览器输入显示的网址：http://localhost:8081/，项目启动成功。

（3）返回命令行界面输入Ctrl+c，项目关闭。

2、使用编辑器启动

（1）可以使用的编辑器有：

webstorm：?https://www.jetbrains.com/zh-cn/webstorm/
vscode：https://vscode.en.softonic.com/
Hbuilder：https://www.dcloud.io/

（2）使用webstorm编辑器演示：

修改启动按钮位置：

添加启动器npm：

（3）启动项目

（4）项目启动成功

五、vue项目目录

下面开始进入你的vue之旅吧！！

https://v3.cn.vuejs.org/ //官网才是开始的必经之路。。。。

如何创建一个vue项目（详细步骤）相关推荐

IDEA创建一个JavaWeb项目详细步骤
刚好最近在写数据库大作业任务书,留了一份,发在博客上提前说明使用IDEA+Html5+CSS+JavaWeb+MySql开发,并使用Tomcat部署在本地服务器上. 其中JDK版本为1.8, My ...
使用webpack脚手架创建一个vue项目
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目实例交流前言介绍创建vue的项目方式有很多种,这里仅介绍使用webpack脚手架来创建一个vue项目,下面将创建 ...
使用VSCode创建一个Vue项目
使用VSCode创建一个Vue项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v //( ...
安装Vue node 及创建一个Vue 项目
安装Vue 和 node 及创建一个Vue 项目一下载node.js安装包 1 下载资源包,然后安装 2 点击以上的Run(运行),将出现如下界面,然后一直点击Next 直达安装完成 3 检测P ...
如何创建一个vue项目
首先要准备好node.js npm,vue-cli 创建一个vue项目,使用脚手架创建具体命令如下 vue init webpack 项目名称然后回车 Project name 项目名称 ( ...
从零开始创建一个vue项目 1
从零开始创建一个vue项目创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...
MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目一.安装node环境二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目三.vu ...
创建一个web项目的步骤
花费了大量的时间在结构目录上. 记下来免得下次忘记了步骤文章目录创建一个web项目创建c3p0的xml文件使用细节创建一个web项目新建一个项目创建好后目录中有图中方框内的内容添加WE ...
从零开始，创建一个VUE项目，详细图文详解。
准备工作 1.安装VScode 点击下载 2.安装node 点击下载 3.安装npm 点击下载一.步骤详解 1.创建项目的文件夹.比如F盘下新建一个名为MyDemo的文件夹,打开VScode进入My ...
vue-cli创建vue项目详细步骤
一.安装node环境(建议使用LTS) Download | Node.js 二.下载vue和vue-cli脚手架命令:npm i -g vue ; npm i -g @vue/cli 三.在想要创 ...

如何创建一个vue项目（详细步骤）