vue-cli

发布时间：2020-12-15 05:34:23 所属栏目：Java 来源：网络整理

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

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

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

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

image.png

安装

Vue提供了两种方式

<script src="https://cdn.jsdelivr.net/npm/[email?protected]/dist/vue.js"></script>

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 包含如下代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>my-project</title> </head> <body> <noscript> <strong>We‘re sorry but my-project doesn‘t work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>

该文件是程序的入口 <div id="app"></div>是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 代码如下：

<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from ‘./components/HelloWorld.vue‘ export default { name: ‘app‘,components: { HelloWorld } } </script> <style> #app { font-family: ‘Avenir‘,Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

一个Vue组件包含三个部分

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

作者：小菜鸟Soul
链接：https://www.jianshu.com/p/66e0147cb2e2
来源：简书

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!