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

快速创建vuecli项目(入门)

时间:2019-12-05 01:02:56      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:完成   启动   oba   nod   文件   命令行   浏览器   鼠标   guid   

1.安装环境

为了方便,以下操作大多数中命令行中运行,window可以用cmd,powershell,gitbash等。

  • 安装node.js
    打开它的官网,或者中文网站,然后直接下载就可以了,然后跟安装普通的应用一样,直接安装就好了。
  • 查看node和npm的版本
    直接用命令行分别运行下边命令,出现如图,就说明安装完成
node -v
npm -v

技术图片

npm的服务器在国外,为了方便,建设安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装vue-cli
    打开它的官网,可以快速地安装,直接运行下边命令。如果是mac或者linux,因为有参数-g,所以在命令前加上sudo 或使用su安装
cnpm install -g @vue/cli
或
npm install -g @vue/cli

技术图片

2.搭建项目

  • 创建一个文件夹,用来存放我们的所有项目,也就是你的工作空间,这个路径完全自定义,随便一个文件夹都行,然后使用命令行进入到这个文件夹下。在windows下,可以按住shift,然后点击鼠标右键,就可以打开

  • 使用脚手架创建项目,运行下边命令, 后边的//是注释,复制命令时不要复制
vue create vuecli-demo  //vuecli-demo是你的项目名,这句命令执行时会有一些选择项,不用管,一直回车,这些具体的设置项在vue cli的官网都有说明

这个命令执行完成后,会在你的工作空间中创建一个名为vuecli-demo的文件夹,里边就是你的项目
如果这个命令长时间卡住不动时,按ctrl+c取消,然后删除 刚才创建的这个文件夹,重新执行上边命令

  • 然后它会给你两个命令,依次执行图中这两个命令
    技术图片
    这时会编译你的项目,然后自动启动服务。
    技术图片

最后在浏览器中打开
http://localhost:8080/

快速创建vuecli项目(入门)

标签:完成   启动   oba   nod   文件   命令行   浏览器   鼠标   guid   

原文地址:https://www.cnblogs.com/Lyn4ever/p/11986575.html

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