首先介绍一下命令行构建一个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_Python处理JSON文件

    # Python处理Json对象 # Python处理Json对象 ''' json.loads() 将JSON字符串转为Python对象 json.dumps() 将Python对象转为JSON字符 ...

  2. php读取Excel文件数据

    首先先下载 PHPExcel 脚本之家下载地址:https://www.jb51.net/codes/194070.html 然后把文件丢到php脚本同级目录里面 在php文件里面写下以下代码即可 & ...

  3. python-基础入门-7基础

    1.语法和语句 Python中有一些基本规则和特殊字符 1)#符号之后的表示注释 2)\n符号表示换行 3)\继续上一行的内容 推荐使用括号,这样可读性更好 4):将两个语句链接在一行中 类似于c语言 ...

  4. 基于Pycharm的Python开发环境配置

    基于Pycharm的Python开发环境配置 编辑于2020-11-18 Python安装 双击桌面的Python3.x安装包. 勾选Add to path. 方便起见,选择Install now.下 ...

  5. 在线思维导图Ayoa有哪些比较好用的功能

    思维导图是非常实用的一种工具,现在网上有很多制作思维导图的软件,小编也用过很多款软件,今天就和大家分享一款思维导图逆天软件:Ayoa. 用了这款软件后,小编对思维导图的理解刷新了高度,下面就为大家推荐 ...

  6. [java基础]复习 java三大特性,异常,接口,String

    继承 关键字extends 继承是为了不同的实现(龙生九子,各不相同) 单继承,一个类最多只能有一个父类 除了私有的外,子类可以访问父类的方法.属性. new过程中,父类先进行初始化,可通过super ...

  7. 2020 CSP-J 多校赛 Day 2 T2 题解

    0x01 引入 在考场时想了一个错误算法,口胡一下,或许对理解正解有点帮助. 我们考虑交换两个数产生的代价,你会发现我们需要让大的数重复被交换的次数尽可能少,减少它对后面的代价. 那么不难构思出一个按 ...

  8. 【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏(中)

    小伙伴们久等了,在上一篇<[开发板试用报告]用OLED板实现FlappyBird小游戏(上)>中,我们本着拿来主义的原则,成功的让小鸟在OLED屏幕上自由飞翔起来,下面我们将加入按钮交互功 ...

  9. 卡耐基梅隆大学(CMU)元学习和元强化学习课程 | Elements of Meta-Learning

    Goals for the lecture: Introduction & overview of the key methods and developments. [Good starti ...

  10. 前端vue小知识点

    前端转后端Json数据 this.orderList=JSON.parse(resp.parameter)