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

直接上干货......vue

步骤:node

1.安装node.js;(下载地址:https://nodejs.org/en/download/)安装完成之后,在命令窗口输入node -v   查看node版本。webpack

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

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

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

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

安装完成后以下图:浏览器

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

注意:以上各步骤安装过程当中若是出翔关于 “ let ... ” 之类的报错,多是node版本的问题,更换其余版本试试。3d

 

经过vue-cli建立的项目带有示例,下面咱们运行并打开示例项目:

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

 7.复制上图圈红的连接,粘贴到浏览器地址栏访问便可看到示例项目。以下图:

相关文章
相关标签/搜索