Vue使用

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 脚手架工具去创建一个新的应用框架并在上面搭建我们的应用。请按照以下步骤:

  1. 在终端,用 cd 命令进入你想要创建示例的文件夹,然后执行 vue create moz-todo-vue
  2. 使用方向键然后按下键盘上的 Enter,选择 "Manually select features(手动选择功能)" 选项。
  3. 你会看到的第一个菜单允许你选择你想要包含在你的项目中的功能。确保 "Babel" 和 "Linter / Formatter" 这两项是被选中的。如果它们没有被选中,使用方向键切换,用空格键选中它们,一旦它们被选中,按下 Enter,继续进行。
  4. 接下来你要为 linter / formatter 选择一个配置。切换选中"Eslint with error prevention only"然后再次按下 Enter。这样可以辅助我们捕获常见的并且不自以为是的错误。
  5. 然后你会被询问需要那种自动化的 lint,选择 "Lint on save",这样我们在项目中保存文件的时候就会自动检查错误。按下 Enter 继续。
  6. 接着你将需要选择把配置文件放在哪里。"In dedicated config files" 这个选项会把你的配置文件比如 ESLint 单独放在一个文件里。另一个选项 "In package.json" 则会把配置放进项目的 package.json 文件里。选择 "In dedicated config files" 然后按下 Enter。
  7. 最后会问你,是否选择把本次的选择作为将来的一个预设配置(Save this as a preset for future projects?),这个就完全由你自己决定了。如果你想把本次的配置作为一个预设配置并且以后想再次使用的话,按下 y,否则按下 n。

然后脚手架工具就开始构建项目,并且安装所需的依赖。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值