--创建Vue 项目 pc 需要装 node 环境 ,安装完之后,就可以在cmd中使用npm 命令了

1:npm install -g vue-cli  //电脑端需要安装vue 脚手架模板,电脑端一次安装就行

2:vue init webpack vue-demo-1 //创建一个Vue项目 创建完成之后,根据黄色命令继续执行命令

3: 打包Vue项目,在HBUILDERX 中使用命令

1:npm run build

2: 发布1:使用今天服务器工具包

npm install -g serve

serve dist

二:Vue的组件间通信

1: 组件传递数据:

//:定义组件数据

export default {

data() {

return {

commonet: [

{
           name: “ABC”,
           sex: “女”
         },

{
           name: “Abd”,
           sex: “男”
         }

]

}
   }

}

//: 在组件标签上使用定义的组件数据

<custombiaoqian  :comonet=“commonet”/>

2: 组件使用组件传递过来的数据:

//第一种方式

export default{

props ['comment']

}

// 第二种方式

export default{

props:{

comment: Object

}

}

//使用数据

{{commoent.name}}

出现正常提示: 访问:http://localhost:5000

Vue-webpack-hbuilderx 开发前端基本命令的更多相关文章

  1. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  2. windows下搭建vue+webpack的开发环境

    1. 安装git其右键git bash here定位比cmd的命令行要准确,接下来的命令都是利用git bash here.2. 安装node.js一般利用vue创建项目是要搭配webpack项目构建 ...

  3. VUE+WebPack实现精美前端游戏:CardBattle的游戏场景设置

    C:\Users\ZHONGZHENHUA\cardBattle\src\App.vue src/App.vue <template> <div id="app" ...

  4. windows环境下安装vue+webpack的开发环境

    本人最近在学习vue,在学习的过程中遇到对的问题和解决方法 1.我们首先要安装node.js.node.js的官方地址为:https://nodejs.org/en/download/,下载完毕,按照 ...

  5. VUE+WebPack游戏开发:神庙逃亡的游戏设计

  6. 前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo

    一.软件及命令: (1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可). (2)命令1:npm install cnpm -g 命令2:cnpm install web ...

  7. vue+webpack开发(一)

    一开始接触这个vue+webpack的时候,实在是摸不着头脑,根本无从下手. 但是经过这两天的研究,其实你会发现vue其实并不难,难度都在webpack你对webpack的理解. webpack顾名思 ...

  8. Vue.js-组件化前端开发新思路

    Vue.js-组件化前端开发新思路 12017.04.14 18:31:25字数 6228阅读 5632 本文章是我最近在公司的一场内部分享的内容.我有个习惯就是每次分享都会先将要分享的内容写成文章. ...

  9. Vue+Webpack构建移动端京东金融(一、开发前准备)

    一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...

随机推荐

  1. order by 多个条件

    ORDER子句按一个或多个(最多16个)字段排序查询结果,可以是升序(ASC)也可以是降序(DESC),缺省是升序.ORDER子句通常放在SQL语句的最后.ORDER子句中定义了多个字段,则按照字段的 ...

  2. 万恶技术系列笔记-jupyter工作路径和源文件打开方式

    万恶技术系列笔记-jupyter工作路径和源文件打开方式   脚本文件,ipynb的正确打开姿势: ipynb不能直接打开,需要复制到工作路径.例如 10_monkeys_model_1.ipynb ...

  3. Kafka的安装与使用(转)

    9.1 Kafka 基础知识 9.1.1 消息系统 点对点消息系统:生产者发送一条消息到queue,一个queue可以有很多消费者,但是一个消息只能被一个消费者接受,当没有消费者可用时,这个消息会被保 ...

  4. 【转】Redis哨兵(Sentinel)模式

    主从切换技术的方法是:当主服务器宕机后,需要手动把一台从服务器切换为主服务器,这就需要人工干预,费事费力,还会造成一段时间内服务不可用.这不是一种推荐的方式,更多时候,我们优先考虑哨兵模式. 一.哨兵 ...

  5. idea的java类图标C不见,取而代之是J标识,且写代码无提示

    https://blog.csdn.net/weixin_42800689/article/details/83819676 方法1 此时我们需要关闭节能模式: File–Power Save Mod ...

  6. WeQuant教程—1.4 实践教学:比特币量化定投

     在wequant.io,为了让读者能直接体验量化系统的魅力,我们用前面的思路,实现了一套完整的量化系统和回测工具,这个系统非常简单,用户只需要把交易意志用策略表达出来,系统就可以自己完成交易效果的回 ...

  7. Centos7基础之查看NETMASK,GATWAY,DNS小技巧

    引语: 查看IP这种很基础的操作,想必大家都快倒背如流了.就是不知道大家知不知道怎么查看NETMASK,GATWAY,DNS.当然nmtui图形化界面以及查看网络配置文件这种骚操作就直接略过了.之前一 ...

  8. Win10升级后无法删除Windows.old文件夹

    问题:win10系统进行升级后(升级到1903版本),无法删除生成的Windows.old文件夹,提示文件夹访问被拒绝. 点击继续后,无法进行正常删除. 解决方法:使用windows自带的磁盘清理进行 ...

  9. Qt休眠

    QTest::qSleep(250); //unresponsive QTest::qWait(250); //stay responsive QThread::usleep(100); //mill ...

  10. POJ 3624 Charm Bracelet(01背包模板题)

    题目链接 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 52318   Accepted: 21912 Descriptio ...