手把手教你Vue-cli项目的搭建

Vue-cli是基于Vue.js进行快速开发的标准工具。Vue-cli中集成了一些插件，在创建新项目时可以直接选择安装，开发过程中能够提高开发效率。

工具准备

在进行项目搭建前需要安装以下工具：

• Node.js：可以从官网https://nodejs.org/en/下载最新版本进行安装。
• Vue-cli：在安装了Node.js后，在命令行中使用以下命令进行安装：

npm install -g vue-cli

创建项目

在安装了Vue-cli之后，可以使用以下命令创建一个Vue项目：

vue init webpack my-project

其中，my-project是你要创建的项目的名称，可以自行定义。

在创建项目时，可以选择需要集成的插件。例如，可以选择安装vue-router插件，用于实现路由功能。同时，还可以选择使用ESLint进行代码风格检查。

创建完成后即可进入项目目录，在命令行中使用以下命令进入项目：

cd my-project

运行项目

进入项目目录后，在命令行中使用以下命令运行项目：

npm run dev

此时，项目已经开始运行，可以在浏览器中输入http://localhost:8080/进行访问。

示例说明

示例一

假设有一个需求，需要创建一个Vue项目，并添加一个路由来实现页面跳转。

1. 在命令行中使用以下命令创建一个新的Vue项目：

vue init webpack my-project

1. 进入my-project目录，并安装vue-router插件：

cd my-project
npm install --save vue-router

1. 在src目录下创建一个router文件夹，并在其中创建一个index.js文件：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    // 在这里添加路由配置
  ]
})

1. 在App.vue中添加路由出口的标签：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

1. 在index.js中添加路由配置：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import HelloWorld from '@/components/HelloWorld'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

1. 运行项目，并访问首页http://localhost:8080/，即可看到HelloWorld组件的内容。

示例二

假设有一个需求，需要在Vue项目中使用Element UI组件库。

1. 在命令行中使用以下命令创建一个新的Vue项目：

vue init webpack my-project

1. 进入my-project目录，并安装element-ui插件：

cd my-project
npm i element-ui -S

1. 在main.js中引入element-ui：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

1. 在App.vue中使用element-ui组件：

<template>
  <div id="app">
    <el-button type="primary">测试按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

1. 运行项目，即可看到测试按钮已经可以在页面上显示出来。

总结

使用Vue-cli创建新项目时，可以根据需求选择需要集成的插件。对于插件的使用，可以参考官方文档或查找相应的使用教程。同时，也可以使用其他的Vue组件库和工具，来提高开发效率。