首先介绍一下命令行构建一个vue项目步骤:

1、下载安装node.js(直接运行安装包根据步骤安装完),打开命令行输入:node -v ,出现版本号即安装成功。

2、命令行界面输入:cnpm install vue-cli -g,全局安装vue.cli脚手架,输入vue list 出现如下信息即可。

3、选择一个目录创建项目文件夹,cd命令到该文件夹,输入命令:vue init webpack  ”项目名称“,根据提示填写对应信息和设置安装事项。

4、项目创建完成后,会出现两个命令,依次输入执行就可以运行项目,使用浏览器打开最后出现的提示地址就可以看到vue项目的初始化界面。

5、如此:vue项目创建完毕,接下来就可以在各种开发工具中导入vue项目进行下一步开发了。

初学者快速构建一个vue项目:

下载安装HBuilder X 工具:http://www.dcloud.io/hbuilderx.html

左上角文件→新建→项目,在项目面板中选择vue项目

项目结构如下:

运行项目:确保该项目的必须包都已下载好,没有的话先执行npm install。执行操作同下,两种皆可。

菜单运行方式:运行→运行到终端→npm run serve,出现运行地址后到浏览器运行即可。 命令方式:右键vue项目→使用命令行窗口打开所在目录(A)→输入命令:npm run serve→回车执行,得到一样的运行结果

快速构建一个vue项目的更多相关文章

  1. 利用 vue-cli 构建一个 Vue 项目

    一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...

  2. springboot:快速构建一个springboot项目

    前言: springboot作为springcloud的基础,springboot的热度一直很高,所以就有了这个springboot系列,花些时间来了解和学习为自己做技术储备,以备不时之需[手动滑稽] ...

  3. 构建一个Vue项目

    一 我们需要安装vue.js Vue.js官网 当我们已经安装了vue-cli,那么我们需要更新Vue-cli. vue-cli3.0使用及配置 二 安装好了之后: 我们可以直接使用命令:mkdir ...

  4. 不借助vue-cli,自行构建一个vue项目

    前言: 对于刚刚接触vue的同学来说,直接用官方的构建工具vue-cli来生成一个项目结构会存在一些疑惑,比如:   .vue组件 为什么可以写成三段式(tempalte.script.style)? ...

  5. [开源]快速构建一个WebApi项目

    项目代码:MasterChief.DotNet.ProjectTemplate.WebApi 示例代码:https://github.com/YanZhiwei/MasterChief.Project ...

  6. 快速构建一个springboot项目(一)

     前言: springcloud是新一代的微服务框架而springboot作为springcloud的基础,很有必要对springboot深入学习一下. springboot能做什么? (1)spri ...

  7. 快速创建一个vue项目

    vue脚手架 用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm in ...

  8. 【springBoot】之快速构建一个web项目

    基于maven,首先看pom文件 <parent> <groupId>org.springframework.boot</groupId> <artifact ...

  9. 快速构建一个简单的单页vue应用

    技术栈 vue-cli webpack vux,vux-loader less,less-loader vue-jsonp vue-scroller ES6 vue-cli:一个vue脚手架工具,利用 ...

随机推荐

  1. Python_selenium案例:

    selenium案例 #coding=utf-8 #select下拉框处理 from selenium import webdriver from selenium.webdriver.common. ...

  2. Elementary OS安装及开发环境配置(一)

    前言 假期在家无聊,刚好把六年前的一台笔记本电脑利用起来,原来电脑虽然说配置说不上古董机器,但是运行win系统感觉还是不流畅,所幸给换成Linux桌面版系统,在网上查阅了很多,Linux桌面系统要么推 ...

  3. vue统计组件库和ui框架

    UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...

  4. 兄弟萌,这份SpringMVC框架学习笔记真的建议反复看,写的太细了

    概述 是Spring为展现层提供的基于MVC设计理念的Web框架,通过一套MVC注解,让POJO成为处理请求的控制器,而无需实现任何接口 支持REST风格的URL请求 采用松散耦合的可插拔组件结构,比 ...

  5. TCP的ACK机制

    下面是整个的tcp的三次握手和四次挥手的协议 TCP四次挥手 在客户端先发送一个FIN的包,表示要close(),客户端想和连接断开,发完之后出于FIN_WAIT_1状态下:服务端收到之后就变成CLO ...

  6. 带你了解Boom 3D的Mac版音效模式

    音乐是很好的情绪抒发途径,因为音乐蕴含了很多信息,包含了很多情感,所以我们聆听不同种类的音乐的时候会产生不同的心理感受.这就是音乐的魅力,可以让人产生共鸣引发无数的思绪.为了能够更好的体会感受音乐可以 ...

  7. Folx好用的下载功能介绍

    Folx作为一款使用便捷的Mac系统下载软件,为用户提供了网页链接捕获.种子文件下载.智能标签等功能,而其Folx专业版更为用户提供了智能控制速度.计划下载任务.种子文件搜索下载等更加智能化的功能. ...

  8. 【移动自动化】【五】常用API

    常用API click: 点击 sendKeys: 输入内容 swipe: 滑动 TouchAction:这也是手势操作 github https://github.com/wangxiao9/app ...

  9. 使用javaxmail发送文字邮件

    package com.rupeng.javaMail; import java.util.Properties; import javax.mail.Authenticator;import jav ...

  10. idea中快速将类中的属性转为Json字符串的插件

    当我们想要测试接口的时候,难免会根据一个类,一个一个的写json数据,当属性比较少时还行,但当属性多的时候就比较麻烦了, 为了解决这个问题,我们可以安装第三方的插件来快速生成json字符串. 步骤如下 ...