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/

使用vue脚手架快速创建vue项目(入门)的更多相关文章

  1. 在使用vue+webpack模版创建的项目中使用font-awesome

    前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...

  2. VS code快速创建vue模板

    忘记了.vue文件的格式或者不想手动敲那段模板代码怎么办?VS code快速创建vue模板帮你偷个小懒 第一步:新建模板并保存 打开 VS code,依次点击 file > Preference ...

  3. Intellij Idea 创建Web项目入门(一)转

    Intellij Idea 创建Web项目入门(一) 相关软件: Intellij Idea14:http://pan.baidu.com/s/1nu16VyD JDK7:http://pan.bai ...

  4. 2springboot:快速创建springboot项目

    使用IDEA快速创建springboot项目流程: 创建新的项目选择 项目的命名以及包名 需要什么包就导入什么包 进行测试的单元 <dependency> <groupId>o ...

  5. Spring-boot(一)通过向导快速创建Spring-boot项目

    通过向导快速创建Spring-boot项目 创建步骤: 选择Spring Initializr 填写组织和模块名 选择对应的模块 注:这里左侧的模块比较多,玩家可以根据自己的实际需要自由选择,此处暂时 ...

  6. 【快学springboot】1.快速创建springboot项目

    若图片查看异常,请前往掘金查看:https://juejin.im/post/5d00e793f265da1b614ff10b 使用spring initialize工具快速创建springboot项 ...

  7. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  8. 快速创建vue 项目

    随着VUE 技术的不断更新,越来越多的开发者开始使用vue编写前端界面,今天我就和大家分享一下 ,如何快速创建一个vue项目. 前提: 安装了node.js 首先: 全局安装vue-cli 使用命令: ...

  9. 快速创建 Vue 项目

    转载:https://www.jianshu.com/p/c7df292915e7 为了便于 Vue 项目的管理, Vue 团队官方开发了 vue-cli 工具. 本文将带您使用 vue-cli 快速 ...

随机推荐

  1. MATLAB中cell函数用法

    cell元包是matlab中提供的一种数据类型,功能强大. 关于cell的创建: 1.跟一般创建举证一样,直接使用C = {A B D E}这种形式,不过这里把"[]"改成了}&q ...

  2. Python基础班学习笔记

    本博客采用思维导图式笔记,所有思维导图均为本人亲手所画.因为本人也是初次学习Python语言所以有些知识点可能不太全. 基础班第一天学习笔记:链接 基础班第二天学习笔记:链接 基础班第三天学习笔记:链 ...

  3. 在Tinymce编辑器里,集成数学公式

    在以前,需要在Web页面显示数学公式,常用的都是先制作成图片,然后插入到页面里.这使得后期对数学公式的修改变的麻烦,同时也不利于搜索引擎搜索. 本文将介绍如何在TinyMce编辑器里集成数学公式.先看 ...

  4. 为什么说 Java 中只有值传递?

    对于初学者来说,要想把这个问题回答正确,是比较难的.在第二天整理答案的时候,我发现我竟然无法通过简单的语言把这个事情描述的很容易理解,遗憾的是,我也没有在网上找到哪篇文章可以把这个事情讲解的通俗易懂. ...

  5. 获取iOS设备的型号

    获取iOS设备的型号 需要#import "sys/utsname.h"     structutsname systemInfo;     uname(&systemIn ...

  6. markdown语法之字体、字号、颜色以及背景色

    字体.字号与颜色 html标签:<font> font标签属性: face:字体 size:规定文本的尺寸大小. 可能的值:从 1 到 7 的数字. 浏览器默认值是 3. color: 颜 ...

  7. libcurl库浅析

    先放上libcurl官方文档:链接 第一步:全局初始化 #include <curl/curl.h> CURLcode curl_global_init(long flags ); 在使用 ...

  8. [TimLinux] 开博一个月了

    做事情,怕的确实是坚持!为了自己尽可能的每天一篇博文,时常在下班后,23点开始写博,有时候写到接近一点钟.但是这第一个月,确实坚持下来了.平均每天一篇.写博的过程,其实是: 知识的总结过程: 因为要求 ...

  9. 线性规划VB求解

    线性规划VB求解 Rem 定义动态数组 Dim a() As Single, c() As Single, b() As Single, cb() As Single Dim aa() As Sing ...

  10. 跨站脚本(XSS)备忘单-2019版

    这是一份跨站脚本(XSS)备忘录,收集了大量的XSS攻击向量,包含了各种事件处理.通讯协议.特殊属性.限制字符.编码方式.沙箱逃逸等技巧,可以帮助渗透测试人员绕过WAF和过滤机制. 译者注:原文由Po ...