首先介绍一下命令行构建一个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. Linxu (centos6.8)常见目录及文件解析

    /etc/sysconfig/networ-scripts/ifcfg-eth0    第一块网卡配置 BOOTPROTO="dhcp" #启用地址协议,static静态协议,bo ...

  2. Elementary OS 使用fcitx安装搜狗词库、搜狗输入法(Linux通用)

    刚开始接触Linux的小伙伴可能比较懵逼,我要使用ibus输入法还是fcitx(小企鹅)输入法,其实这两种都不能说是输入法,Linux中输入法的使用是依赖于输入法框架的,其中搜狗输入法和百度输入法都是 ...

  3. HDU100题简要题解(2010~2019)

    HDU2010 水仙花数 题目链接 Problem Description 春天是鲜花的季节,水仙花就是其中最迷人的代表,数学上有个水仙花数,他是这样定义的: "水仙花数"是指一个 ...

  4. 学习笔记:[算法分析]数据结构与算法Python版[基本的数据结构-上]

    线性结构Linear Structure ❖线性结构是一种有序数据项的集合,其中 每个数据项都有唯一的前驱和后继 除了第一个没有前驱,最后一个没有后继 新的数据项加入到数据集中时,只会加入到原有 某个 ...

  5. NO.A.0002——Git简史及安装教程/创建本地仓库/提交项目到本地仓库/误删还原

    一.Git简史及同类产品对比: 1.git简史:        同生活中的许多伟大事件一样,Git 诞生于一个极富纷争大举创新的年代.Linux 内核开源项目有着为数众广的参与者.绝大多数的 Linu ...

  6. 应用程序-特定 权限设置并未向在应用程序容器不可用 SID (不可用)中运行的地址 LocalHost (使用 LRPC) 中的用户...的 COM 服务器应用程序的 本地 激活 权限。此安全权限可以使用组件服务管理工具进行修改。

    很久以前发现我们的业务服务器上出现一个System的系统严重错误,查找很久都没有找到解决办法,今日再次查看服务器发现报错更频繁,于是就搜集各种资料进行查找解决办法,终于找到了一个解决办法. 错误截图介 ...

  7. 思维导图iMindMap可以在哪些领域应用

    生活工作中你常常会遇到许多力所不能及的事情,感到无奈.茫然,这时候你急需一个帮手来帮你打破困境,思维导图就是这样的救世主,至于它有哪些力所能及的事情就是下面小编要跟你讲的. 你是否经常遇到过这样的情况 ...

  8. iOS gif图显示问题

    问题 有时候需要显示gif动态图,让界面更加的绚丽,但是iOS默认只支持png,gpg图片.那么如何才能显示gif图呢? 解决方式 添加框架 CoreGraphics.framework ImageI ...

  9. 简单好用的TCP/UDP高并发性能测试工具

    工具下载地址: 链接:https://pan.baidu.com/s/1fJ6Kz-mfFu_RANrgKqYiyA 提取码:0pyf 最近测试智能设备的远程的性能,思路主要是通过UDP对IP和端口发 ...

  10. Web 常见漏洞

    检测到目标URL存在http host头攻击漏洞 描述:为了方便的获得网站域名,开发人员一般依赖于HTTP Host header.例如,在php里用_SERVER["HTTP_HOST&q ...