vue的简介及@vue/cli 脚手架的使用示例

Vue是一个用于构建用户界面的渐进式框架。与其他一些框架不同，Vue采用了渐进式单文件组件的方式，以更优雅、更易于维护的方式来构建应用程序。

VueCLI是Vue官方提供的一个脚手架，可以快速搭建Vue项目，提供了丰富的插件和可定制化的配置项。下面是@vue/cli脚手架的使用示例。

安装@vue/cli

在终端中执行以下命令进行@vue/cli的安装：

npm install -g @vue/cli

创建一个新的Vue项目

执行以下命令创建一个新的Vue项目：

vue create my-project

此时会弹出一些可选择的配置项，可以根据需要进行选择或保持默认值。

运行项目

执行以下命令以启动Vue项目：

npm run serve

执行完毕后，在浏览器中访问http://localhost:8080即可看到Vue应用程序。

示例1：添加Vue插件

可以通过VueCLI提供的插件来扩展Vue应用程序的功能，例如添加一个Vue Router插件。

vue add router

此命令会自动安装和配置Vue Router插件，并在项目中添加和修改相关文件。

示例2：自定义VueCLI配置

可以通过vue.config.js文件来自定义VueCLI的配置项。例如，可以添加一个别名来简化文件路径的引用。

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

以上是关于Vue的简介及@vue/cli脚手架的使用示例。通过以上的讲解，你可以快速上手VueCLI，并使用其提供的插件和配置项来快速搭建和定制化Vue应用程序。