VUE开发上手（02）——简单项目创建

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

本节开始，讲述VUE项目的创建。

首先，安装VUE

CMD下执行命令npm install vue -g

第二步，使用vue-cli创建项目
npm install -g vue-cli安装的是vue-cli2.x版本，创建项目使用的是CMD下命令方式。本文使用3.0版本创建项目，故应使用命令npm install -g @vue/cli，使用的是WEB UI方式创建项目。

第三步，启动项目UI

CMD下执行命令vue ui，打开Vue项目管理器：

第四步，创建项目

点击 在此创建新项目 开始创建项目。

  • 填写项合适的目名称。

  • 包管理器保持默认，或选择 npm。

  • Git项目中选中 初始化git仓库。

    继续 下一步，在 预设 页面中选择 手动配置项目 项，下一步。

第五步，基础插件的安装

功能页中选择 Babel, Router 和 使用配置文件 项目，取消 Linter/Formater 的选择（ESLint的语法检查太严格，而且和我们通常写代码的习惯略有不同，作者大概是个强迫症患者，所以初学者不建议使用），下一步。

第六步，完成创建

Use history mode for router？ 项目保持不变，如果上一步安装了 ESLint ，此处建议选择 ESLint+Standard config，并选择 Lint on save。

点击 创建项目，保存预设的配置文件后，等待一段时间后，项目创建完成。

第七步，启动项目

项目创建完成后，进入项目管理界面：

左侧边栏中选择最后一项 任务 ，选择 serve，然后点击 运行 按钮。

完成检查后点击 仪表盘 选项卡中的 启动app 按钮。

至此，一个简单的vue项目就创建完成了。

备注：

  • 如果采用CMD下命令行启动项目，需执行npm run serve命令，@vue/cli3.0创建的development模式名称为 serve，vue-cli 2.x创建的名称为 dev 。

  • 如果创建项目时安装了ESLint，创建后想要关闭ESLint语法检查，可以在项目根目录下新建 vue.config.js 文件，然后插入节点lintOnSave: false。

相关文章
VUE开发上手（01）——基础环境配置

以上是 VUE开发上手（02）——简单项目创建 的全部内容， 来源链接： utcz.com/z/375325.html

回到顶部