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

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/

项目目录

组件

组件系统是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中的文件（子组件）

views中的文件（父组件），对组件进行挂载

配置文件package.json介绍