自学内容网 自学内容网

从零开始启动一个Vue项目

目录

一、首先下载Node.js

二、安装vue脚手架vue-cli

三、使用vue-ui创建一个vue项目

四、vue项目目录结构

五、启动vue项目

方法一:cmd窗口启动

方法二:软件中启动 


一、首先下载Node.js

可以去看我的上一篇博客: NodeJs的安装及环境配置-CSDN博客

二、安装vue脚手架vue-cli

1、进入管理员模式的命令行

2、然后在命令行输入指令:

npm install -g @vue/cli

3、完成后,检查是否安装成功:

vue --version
vue -V

上面两条命令都可以查看脚手架版本

也可以使用下述命令查看vue版本:

npm list vue

(注意要切换到项目目录下使用此命令) 

运行结果如下:

三、使用vue-ui创建一个vue项目

1、以管理员身份打开cmd终端,进入需要创建项目的目录后,输入以下指令:

vue ui

2、然后就会在浏览器打开一个窗口,可以在该窗口进行创建vue项目:

① 首先进入创建项目页面

② 点击在此创建新项目

③ 对创建的项目进行相关配置

④ 点击创建项目

⑤ 等待项目创建完成

创建项目大概需要一段时间稍作等待:

创建完后会进入下面界面:

⑥ 查看创建好的项目文件

四、vue项目目录结构

vue项目目录结构 :

大致结构如上图所示,若想更深一步了解可自行搜索

五、启动vue项目

方法一:cmd窗口启动

在项目目录命令行界面,输入:

npm run serve

在浏览器输入下面链接即可打开vue的初始界面

方法二:软件中启动 

也可以在别的软件中打开,效果同上,都是打开终端使用npm run serve命令启动vue

注意:是要在vue项目目录下使用npm run serve,比如这里的话是在vue-project目录下使用此命令。

如果项目是前后端分离的话,则是在前端文件目录下使用此命令,而不是在项目文件目录下使用此命令


原文地址:https://blog.csdn.net/weixin_73735141/article/details/145214732

免责声明:本站文章内容转载自网络资源,如侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!