概要
这里有一些我看到的问题。让我试着回答它们:
- Do you need a complex project setup?
你需要一个复杂的项目配置吗?
- Should you use ES6 or ES5?
你应该使用ES6还是ES5?
- What’s the difference between Vue Instances and Vue Components?
Vue实例和Vue组件之间的不同是什么?
- How can you integrate 3rd Party JS and CSS Libraries?
如何集成第三方 JS 和 CSS 库?
- Everyone can see my code!
每个人都能看到我的代码!
- “Can you use Vue with Redux?”
可以一起使用 Vue 和 Redux 吗?
- Can you use Vue with PHP/Node/…?
你能和 PHP/Node/…一起使用 Vue 吗?
- My State is Lost after a Page Refresh!
我的状态在刷新页面后丢失!
- “Can I host my app on Heroku etc?”
我可以在 Heroku 上托管我的应用程序吗?
- My Routes are broken after Deployment!
我的路由在部署后被破坏了!
解答部分
(1)我需要一个复杂的配置吗?
请问:你是否只是导入 vue.js
到你的 .html
文件,然后开始写很棒的 Vue 代码?
如果答案是:Yes,你可以那样做,你并不需要一个复杂的配置(比如,使用 Webpack,Babel 和其他的)。
开始使用 Vue 最容易的方法就是添加下面的代码到你的 HTML文件中:
<body>
...
<script src="path/to/vue.js"></script>
</body>
当然,您也可以使用CDN链接。
你可能想要一个更复杂的设置——那意味着一个构建工作流,包括JavaScript的传输、链接、绑定等等——用于更大的应用程序,如果你正在构建单页应用程序(SPAs)。
为什么呢?
简单地说,对于作为开发者的你,这是很容易的!
你会得到很多方便的特色,如果你写了糟糕或错误的代码会有警告,高度优化代码,你可以使用单文件组件(Single File Components)—一个在创建SPAs时特别有用的特性。
但是如果你只是试图给你的 app 添加一些 Vue 魔法,那就用简单的 drop-in 方法吧。
如果你想要一个更复杂的工作流,我强烈推荐使用 Vue CLI - 这可以让这个项目配置变得轻而易举!
(2)你应该使用 ES6+ 还是 ES5 ?
这是另一个我看到很多的问题。ES6+ vs ES5?
ES6+ 仅仅意味着:“最新的 JavaScript 特性” - 比如 箭头函数。
这里是一些 ES5 写的 Vue 代码的例子:
export default {
methods: {
onClick: function(event) {
// do something awesome
}
}
}
这是用 ES6+ 写的:
export default {
methods: {
onClick(event) {
// do something awesome
}
}
}
你应该使用哪一个?
答案是:这完全取决于你,但如果你使用下一代的功能,你的生活会更轻松,也更有趣。有些问题更容易解决。
(3)Vue实例 和 组件之间的区别是什么?
Vue组件在最后扩展Vue实例。您可以访问相同的Vue特性(比如 data
,methods
,… - 但不包括 el
)但是,这里有一个非常重要的区别!
Vue 组件是可复用的。你可以定义你自己的“HTML标签”(例如 my-cool-component
)并且可以在你的Vue app中的任何地方使用它(这取决于它被定义为全局组件还是局部组件)。
Vue实例总是只控制DOM的一个元素,因此它不能复用。
这里有一个例子:
<div id="my-app">
<my-component />
</div>
Vue.component('my-component', {
template: 'Hi, here is a component!'
});
new Vue({
el: 'my-app'
});
在这个例子中,我们定义了 my-component
组件,并且在 id 为 my-app
的 <div>
中使用了它。这个 <div>
是通过一个Vue实例控制的,因此它可以渲染 Vue 组件。然后我们可以如我们所想的那样使用这个组件了。
当然,Vue组件模板可以更加复杂,并且可以使用常规的HTML标记和其他组件。
组件是任何东西的核心组成部分,但是对于非常小的Vue应用程序,我强烈建议,在创建它们的时候,查看单文件组件。用那种方法你将得到更多乐趣!
(4)如何集成第三方 JS 和 CSS 库?
“我怎样才能将库XY添加到我的Vue项目中呢?”
这个疑问我也看到很多。好消息是:给一个 Vue 项目添加库是很容易的。我将假设有一个使用CLI创建并配置的项目。如果您只是将Vue放入一个HTML文件中,您可以对其他包执行相同的操作。
那么,你如何将一个库添加到一个已创建的项目中呢?
最简单的方法就是使用 npm:
npm install –save my-library
一旦你那样做了,你就可以把它导入到在你的 src/
文件夹中的 main.js
或者 index.js
(你设置那个文件)文件中。
是的,你没看错。- 我没有问它是一个 CSS 库还是 JS 库,您可以导入这两种类型的文件 - Webpack(确切地说:一些webpack模块加载器) 将会找到它并确保所有的东西都被正确地打包和载入。
这里是一个例子,一些JS 库看起来应该是如何的:
import 'my-library';
// 或者写成:
import 'path/to/my/file.js';
// 你可以省略后缀 .js
new Vue({...});
对于一个 CSS文件来说,它应该是这样的:
import 'path/to/my/file.css';
// 不能省略 .css - Webpack 需要这个
new Vue({...})
(5)每个人都能看到你的代码吗?
如果你打开developer tool,你将会注意到,你可以相对容易地查看你的源代码(甚至是未压缩的源代码,因为资源映射)。
JavaScript在浏览器中运行,而且它不是预编译的——这意味着在网页上的每个人可以读取它。它可能会被压缩和混淆,但这只会使它变得更困难,而不是阻止它。你对此无能为力!
这是一桩交易破坏者吗?
不!它只是意味着你不应该将安全相关或敏感的信息放入你的前端JavaScript代码中。所有其他代码都可以访问,但它通常也不会为黑客提供任何重要信息。
由于您的代码对每个人都是可访问的,所以您应该始终依赖于用户输入的服务器端验证。您可以使用Angular的表单验证功能编写世界上最好的验证代码,但是由于任何使用都可以简单地改写或破坏该代码,您也需要在服务器上进行验证!
前端代码提供了良好的用户体验(例如通过即时验证结果),而不是保护您的数据库。
- 参考资料