Vue-CLI

Vue 是专注于构建用户界面层的渐进式 JavaScript 框架，它可以很方便地与各种中间件或者后端应用程序集成使用。Vue 为我们构建界面层提供了大量有用的工具，助我们构建复杂的单页应用。Vue 的特性包括但不限于：

• 响应式界面
• 声明式路由
• 数据绑定
• 指令
• 组件
• 事件处理
• 属性推断
• 过滤

Vue2.5 核心库大概只有 17KB，非常小，这就保证了引入 Vue.js 并不会对你的编译后的版本添加过多的代码，加速网站的加载。Vue.js 的官方代码位于：https://vuejs.org/。

image.png

安装

Vue提供了两种方式

• CND

• NPM

npm install vue

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Pracel模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

Vue-Cli

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

vue create my-project

image.png

然后

cd my-project

npm run serve

image.png

该命令会启动一个监听 8080 端口的开发服务器，在浏览器中打开该端口可以看到如下界面:

image.png

项目目录结构如下

image.png

文件index.html 包含如下代码：

该文件是程序的入口

是vue的插入点，插入点不能放在body标签外，也不能是body标签。

文件main.js 包含如下代码：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

• import Vue from 'vue' 引入Vue框架
• import App from './App.vue' App是程序的根元素
• render: h => h(App) 渲染App根组件
• $mount('#app') 指定挂载点

文件 App.vue 代码如下：

一个Vue组件包含三个部分

• template html模板
• script 组件逻辑
• style 样式