Vue 是一个现代 JavaScript 框架提供了有用的设施渐进增强——不像许多其他框架,使用 Vue可以 增强现有的 HTML。可以使用 Vue 作为 jQuery 等库的临时替代品。
安装Vue
要在现有站点中使用 Vue,可以通过<script>元素在页面中使用。这使您可以开始在现有站点上使用 Vue,这就是 Vue 引以为傲的渐进式框架的原因。当使用 JQuery 这样的库将现有项目迁移到 Vue 时,这是一个很好的选择。通过这种方法,您可以使用 Vue 的许多核心功能,例如属性、自定义组件和数据管理。
开发环境版本,包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境版本,优化了尺寸和速度,在站点上包含 Vue 时指定版本号,这样任何框架更新都不会影响网站。
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
安装之后,要初始化一个新项目,可以在要创建项目的目录中打开一个终端,并运行 vue create <project-name>
初始化一个新项目
为了探索 Vue 中各种各样的特征,我们将建立一个简单的任务清单应用。我们将会使用 Vue 脚手架工具去创建一个新的应用框架并在上面搭建我们的应用。请按照以下步骤:
- 在终端,用
cd
命令进入你想要创建示例的文件夹,然后执行vue create moz-todo-vue
。 - 使用方向键然后按下键盘上的 Enter,选择 "Manually select features(手动选择功能)" 选项。
- 你会看到的第一个菜单允许你选择你想要包含在你的项目中的功能。确保 "Babel" 和 "Linter / Formatter" 这两项是被选中的。如果它们没有被选中,使用方向键切换,用空格键选中它们,一旦它们被选中,按下 Enter,继续进行。
- 接下来你要为 linter / formatter 选择一个配置。切换选中"Eslint with error prevention only"然后再次按下 Enter。这样可以辅助我们捕获常见的并且不自以为是的错误。
- 然后你会被询问需要那种自动化的 lint,选择 "Lint on save",这样我们在项目中保存文件的时候就会自动检查错误。按下 Enter 继续。
- 接着你将需要选择把配置文件放在哪里。"In dedicated config files" 这个选项会把你的配置文件比如 ESLint 单独放在一个文件里。另一个选项 "In package.json" 则会把配置放进项目的
package.json
文件里。选择 "In dedicated config files" 然后按下 Enter。 - 最后会问你,是否选择把本次的选择作为将来的一个预设配置(Save this as a preset for future projects?),这个就完全由你自己决定了。如果你想把本次的配置作为一个预设配置并且以后想再次使用的话,按下 y,否则按下 n。
然后脚手架工具就开始构建项目,并且安装所需的依赖。