首先介绍一下命令行构建一个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. Java项目读取resources资源文件路径那点事

    今天在Java程序中读取resources资源下的文件,由于对Java结构了解不透彻,遇到很多坑.正常在Java工程中读取某路径下的文件时,可以采用绝对路径和相对路径,绝对路径没什么好说的,相对路径, ...

  2. LeetCode 中等题解(1)

    16 最接近的三数之和 Question 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和. ...

  3. vector删除特定元素

    删除vector中小于20的元素,注意要使迭代器失效,不能简单的删除. #include <iostream>#include <vector>using namespace ...

  4. MathType如何输入微分上的点

    作为被老师们青睐的公式编辑器,MathType可以帮助插入各种数学符号和编辑数学公式,从而提高数学试卷的编写效率.但是作为新手,在编辑公式的时候难免有困难,比如就有人问:如何输入微分上的点?其实也是有 ...

  5. MindManager中主题间距/线条粗细的灵活调整

    在MindManager中,主题和线条是思维导图的基本元素,只有通过它们才能将要表达的思想呈现.并联系起来.因此,关于它们的属性设置就会多一点,如颜色.宽度.位置等.而调整主题之间的距离及线条的粗细, ...

  6. 【linux】系统调用版串口分析&源码实战

    目录 前言 参考 1. 实战分析 1.1 开发步骤 1.1.1 获取串口设备路径 1.1.2 打开设备文件 1.1.3 配置串口 termios 结构体 1. c_iflag 输入模式标志 2. c_ ...

  7. 编程小白必备——主流语言C语言知识点

    对于编程语言来说,经常看到有因为各自支持的语言阵营而互怼的,其实根本没那个必要,都只是一种工具而已.当多数主流语言都会使用时也许你就不会有偏见了,本质不过都是用来描述计算机的一个任务,只是每门语言设计 ...

  8. Linux的硬盘挂载

    一·前言 我朋友买了一个香港的服务器,可用总容量为60G,实际只有15.4G,剩下的容量需要硬盘挂载.他尝试无果,向我求助.我帮他解决了问题,想回顾一下整理写此随笔. 二·运行环境 Linux系统版本 ...

  9. 痞子衡嵌入式:一个奇怪的Keil MDK下变量链接强制对齐报错问题(--legacyalign)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是一个奇怪的Keil MDK下变量链接强制对齐报错问题. 痞子衡最近一直在参与恩智浦SBL项目(就是一个适用LPC和i.MXRT的完整OT ...

  10. 真香!Python开发工程师都选择这个数据库:因为它免费

    数据库类别 既然我们要使用关系数据库,就必须选择一个关系数据库. 目前广泛使用的关系数据库也就这么几种: 付费的商用数据库: Oracle,典型的高富帅: SQL Server,微软自家产品,Wind ...