欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用vue-cli快速搭建vue项目

程序员文章站 2022-08-27 11:31:35
直接上干货...... 步骤: 1.安装node.js;(下载地址:https://nodejs.org/en/download/)安装完成以后,在命令窗口输入node -v 查看node版本。 2.安装npm;(node自带npm,在命令窗口输入npm -v 查看npm版本) 3.安装webpac ......

直接上干货......

步骤:

1.安装node.js;(下载地址:)安装完成以后,在命令窗口输入node -v   查看node版本。

使用vue-cli快速搭建vue项目

2.安装npm;(node自带npm,在命令窗口输入npm -v   查看npm版本)

使用vue-cli快速搭建vue项目

3.安装webpack;(在命令窗口输入npm install webpack -g,如安装完成,输入webpack -v即可查看版本)

使用vue-cli快速搭建vue项目

4.安装vue-cli;(在命令窗口输入npm install vue-cli -g,如安装完成,输入vue -V即可查看版本,注意这里是大写的“V”)

使用vue-cli快速搭建vue项目

5.在命令窗口通过cd命令进入你想创建项目的文件夹(或者手动打开你想创建项目的文件夹,在文件夹内按住shift+鼠标右键,选择“在此处打开powershell窗口”),输入vue init webpack vue02 (vue02为你创建的项目文件夹的名字,可自行更改),会出现提示,一路回车或者输入yes回车,然后等待安装依赖即可。提示如下图:

使用vue-cli快速搭建vue项目

安装完成后如下图:

使用vue-cli快速搭建vue项目

到此为止vue项目已经创建完成。

注意:以上各步骤安装过程中如果出翔关于 “ let ... ” 之类的报错,可能是node版本的问题,更换其他版本试试。

 

通过vue-cli创建的项目带有示例,下面我们运行并打开示例项目:

6.按照提示执行上图圈红的命令:

使用vue-cli快速搭建vue项目

 7.将上图圈红的链接复制进浏览器地址栏即可看到示例项目。如下图:

使用vue-cli快速搭建vue项目