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. List接口下的集合

    集合框架 List接口下的集合特点: Set接口下的集合特点: 1.都是有序的 1.都是无序的 2.都有下标 2.没有下标 3.都可以重复 3.不可重复(覆盖) List接口下的集合 1.ArrayL ...

  2. ThinkPHP5——安装验证码和使用

    1.使用composer安装验证码 首先要安装composer,大部分“composer require topthink/think-captcha”命令无法运行或者提示不是内部文件或可执行命令,都 ...

  3. Modelarts与无感识别技术生态总结(浅出版)

    [摘要] Modelarts技术及相关产业已成为未来AI与大数据重点发展行业模式之一,为了促进人工智能领域科学技术快速发展,modelarts现状及生态前景成为研究热点.笔者首先总结modelarts ...

  4. .Net Core Web Api使用模型验证验证参数合法性

    在接口开发过程中免不了要去验证参数的合法性,模型验证就是帮助我们去验证参数的合法性,我们可以在需要验证的model属性上加上Data Annotations特性后就会自动帮我们在action前去验证输 ...

  5. 【Python3网络爬虫开发实战】 分析Ajax爬取今日头条街拍美图

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:haoxuan10 本节中,我们以今日头条为例来尝试通过分析Ajax请求 ...

  6. Python脚本之三种运行方式,你会几个?

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:Jeremy_Lee123  一.交互模式下执行 Python 这种模式 ...

  7. 适用于Java开发人员的SOLID设计原则简介

    看看这篇针对Java开发人员的SOLID设计原则简介.抽丝剥茧,细说架构那些事——[优锐课] 当你刚接触软件工程时,这些原理和设计模式不容易理解或习惯.我们都遇到了问题,很难理解SOLID + DP的 ...

  8. FPGA_VIP_V101 摄像头视频采集 调试总结之SDRAM引起的水平条纹噪声问题

    FPGA_VIP_V101 摄像头视频采集 调试总结之SDRAM引起的水平条纹噪声问题 此问题困扰我很近,终于在最近的项目调整中总结了规律并解决了. 因为之前对sdram并不熟悉,用得也不是太多,于是 ...

  9. 从零开始的openGL——五、光线追踪

    前言 前面介绍了基本图形.模型.曲线的绘制,但是,在好像还没有感受到那种3D游戏里一些能惊艳到自己的效果,即真实感还不是很足.这篇文章中介绍的光线追踪,是实现真实感必不可少的.拿下面的两张图片来对比 ...

  10. 201871010119-帖佼佼《面向对象程序设计(java)》第十四周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...