使用 Vue-cli 快速搭建一个项目

2021-12-20  本文已影响0人  Yandhi233

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

安装

    npm install -g @vue/cli

    yarn global add @vue/cli

创建项目

    vue create hello-world

可以选择手动或者默认配置,这里我选择手动配置:



根据项目需求选择所需要的配置功能,空格取消或者选中;



其余配置就不一一介绍了
最后选择是否需要将此次设置设为未来的默认配置,建议选择 N 后回车;

接下来就要等好一会了。。

配置完成后看到下面命令,依次输入...



Ctrl+单击 给的链接

这样就快速完成使用 Vue-cli 脚手架搭建一个 Vue 项目了

插件

一个新创建项目的 package.json 文件中,依赖都是以 @vue/cli-plugin-开头的。插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。

在现有的项目中安装插件

  vue add eslint

注意:!!!
官方推荐在运行 vue add 之前将项目的最新状态提交,因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。

如果出于一些原因你的插件列在了该项目之外的其它 package.json 文件里,你可以在自己项目的 package.json 里设置 vuePlugins.resolveFrom 选项指向包含其它 package.json 的文件夹。

{
  "vuePlugins": {
    "resolveFrom": ".config"
  }
}

项目本地的插件

如果你需要在项目里直接访问插件 API 而不需要创建一个完整的插件,你可以在 package.json 文件中使用 vuePlugins.service 选项:

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}
上一篇下一篇

猜你喜欢

热点阅读