后端开发教程 - Java、Spring Boot 实战 - msg200.com
新 Vue.js 项目的快速入门指南
观点
设置新的 Vue.js 应用以确保成功
链接
有关使用vue-cli 3.0 的新 Vue.js 项目的更新文章，vue-cli 3.0请查看快速入门指南。
它还包括一个内容表，以便于在那里轻松导航。;)
观点
在深入研究Vue.js 的短暂时间里，我开始真正欣赏这个框架及其周围的库。
这份专业的指南详细介绍了我为新的Vue.js项目打下坚实基础所采取的步骤。
它具体包含了哪些观点？
首先，
- 包管理器： Yarn——快速、可靠、安全的依赖管理。
- 项目生成工具： vue-cli——用于快速 Vue.js 开发的 CLI。
- UI 框架： Vuetify ——Material Design 组件框架。
- 材料图标库： Google Material Icons — 制作精美、令人愉悦且易于使用。
- 验证库： Vuelidate——针对 Vue.js 的简单、轻量级的基于模型的验证。
- Ajax 库： Axios — 基于 Promise 的浏览器和 Node.js HTTP 客户端。
我发现这些工具和库性能良好、直观且非常易于使用。
我有一个类似的Angular堆栈，其中包括Angular Material以及一些用于渲染动态表单、数据表和其他内容的自定义组件原语。
我非常喜欢动态表单的实现，它允许用户使用简单的 JSON 规范指定高度可配置的
表单。 生成的表单与我们的Rails JSON API后端集成得很好。
我计划写一个关于做同样事情的教程，但这次使用Vue.js和Vuetify，但我离题了……
设置新的 Vue.js 应用以确保成功
在这里，我们将看到如何使用vue-cli设置新创建的应用程序，以便我们立即开始对其进行破解。
先决条件
安装 Node.js、Yarn 和 vue-cli
生成新项目
vue init webpack my-project
我通常会接受所有默认设置，除了包管理器。当被要求时，
我会选择Yarn。
如你所见，我们正在使用Webpack模板。
以下是官方模板列表。
调整 ESLint 规则
将此行添加到文件rules中的密钥中.eslintrc.js：
'no-multiple-empty-lines': [2, { max: 2 }]
进行此更改的原因是我通常会在.vue组件文件内的某些元素之间留下两个连续的空白行。
例如，在import部分 和 以下代码之间。或者和
之间。<template><script><style>
安装项目依赖项
使用Yarn添加项目依赖项：
yarn add vuetify material-design-icons vuelidate axios
我喜欢在编写CSS规则时使用SCSS / SASS的强大功能。
--devdevDependencies将向文件中的部分添加依赖项package.json：
yarn add sass-loader node-sass --dev
初始应用程序配置和设置
要设置Vuetify、Google Material Icons和Vuelidate，您需要将以下行添加到src/main.js：
import Vuelidate from 'vuelidate'
import Vuetify from 'vuetify'
import 'material-design-icons/iconfont/material-icons.css'
import 'vuetify/dist/vuetify.css'
Vue.use(Vuelidate)
Vue.use(Vuetify)
要查看Vuetify 的实际运行情况，请将src/App.vue文件更改为：
<template>
<v-app>
<router-view/>
</v-app>
</template>
<script>
export default {
name: 'App'
}
</script>
以及您的src/components/HelloWorld.vue：
<template>
<v-content>
<v-btn>
Hello!
</v-btn>
</v-content>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
排版
Material Design 的排版指南指出， Roboto和Noto是标准字体。
将此添加到文件<head>的部分index.html：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
看看
开始你的项目：
yarn dev
并访问：http://localhost:8080。
就这样！
祝你一切顺利。:)