码迷,mamicode.com
首页 > 其他好文 > 详细

脚手架方式搭建vue项目

时间:2018-12-06 15:25:44      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:就会   进入   完成   ini   地址   bpa   浏览器   分享   png   

一、首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了。

搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一项——“在此处打开命令窗口”字样,点击就会出来,如图所示:

技术分享图片

此位置就自动是你要创建项目的位置(当然,如果你想再创建文件夹,放在其他位置的话也可以直接输入打开命令npm cd+名字)。

在这里你可以检查一下,如下图的话你就算成功了!

技术分享图片

二、安装vue脚手架

输入命令:npm install -g vue-cli

执行完之后,若不知道是否安装成功可以检验一下:vue -V(此处的-V是大写的!要注意),出现如下结果就是成功了:

技术分享图片

三、创建项目

输入命令:vue init webpack +项目名称

如图所示,

技术分享图片

结束之后,就是搭建完成,输入命令:cd +项目名称(此时在打开你刚刚创建的项目,进入到项目中运行);

再输入命令:npm run dev     运行项目。

也可以按照以下他告诉你的步骤,

技术分享图片

完成之后就会出现:

技术分享图片

之后,按照他告诉你的地址在浏览器中打开就可以了。(出现如下页面)

技术分享图片

目录结构及含义如下:

技术分享图片

 

脚手架方式搭建vue项目

标签:就会   进入   完成   ini   地址   bpa   浏览器   分享   png   

原文地址:https://www.cnblogs.com/yuanyuanya/p/10076725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!