web前端开发之JavaScript:创建vue项目

举报
运气男孩 发表于 2020/09/01 21:29:33 2020/09/01
【摘要】 vue-clivue-cli是vue官方提供的脚手架工具, 也是Vue.js 开发的标准工具github: https://github.com/vuejs/vue-cli 作用:从https://github.com/vuejs-templates下载模板项目CLICLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快...

vue-cli

vue-cli是vue官方提供的脚手架工具, 也是Vue.js 开发的标准工具

github: https://github.com/vuejs/vue-cli

作用:从https://github.com/vuejs-templates下载模板项目

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目,或者直接通过 vue serve 构建新想法的原型。

特性

  • 功能丰富

对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持

  • 易于扩展

它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。

  • 无需 Eject

Vue CLI 完全是可配置的,无需 eject。这样你的项目就可以长期保持更新了。

  • CLI 之上的图形化界面

通过配套的图形化界面创建、开发和管理你的项目。

  • 即刻创建原型

用单个 Vue 文件即刻实践新的灵感。

  • 面向未来

为现代浏览器轻松产出原生的 ES2015 代码,或将你的 Vue 组件构建为原生的 Web Components 组件。

安装

npm install -g @vue/cli       #   OR    yarn global add @vue/cli


创建vue项目

npm install -g vue-cli

vue init webpack vue_demo

cd vue_demo

npm install

npm run dev

访问: http://localhost:8080/


项目目录

image.png

组件

组件系统是vue的另一个重要概念,它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。

// 定义一个名为 button-counter 的新组件

Vue.component('button-counter', {  
data: function () {   
 return {      count: 0
    }
  }, 
 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})

组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

<div id="components-demo">
  <button-counter></button-counter></div>
new Vue({ el: '#components-demo' })

页面views

v-bond(:)用于设置HTML属性
v-on(@)用于绑定HTML事件

  • 设置HTML属性
    components中的文件(子组件)

image.png

views中的文件(父组件),对组件进行挂载

image.png

配置文件package.json介绍

image.png

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200