Vue CLI 2.x搭建vue(目录最全分析)

Vue CLI是一个基于Vue.js的官方CLI工具，可以帮助我们快速搭建Vue.js项目。在Vue CLI 2.x版本中，我们可以按照以下步骤来搭建Vue.js项目：

1. 安装Vue CLI 2.x

首先我们需要安装Vue CLI，可以使用以下命令来安装：

npm install -g vue-cli@2.9.6

2. 创建项目

创建一个Vue.js项目非常简单，只需要执行以下命令：

vue init webpack my-project

这里的“my-project”是项目名称，可以根据自己的需求进行更改。

3. 选择模板

在执行上一步命令后，会出现模板选择的界面，如下所示：

? Project name my-project
? Project description A Vue.js project
? Author John Doe <[e-mail]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

这里需要根据自己的需求进行选择。如果是新手，建议选择默认选项。

4. 安装依赖

项目创建完成后，我们需要进入项目目录并安装依赖：

cd my-project
npm install

5. 运行项目

安装完依赖后，我们可以执行以下命令来运行项目：

npm run dev

这样就可以在浏览器中看到我们的Vue.js应用了。

示例说明

示例1：设置开发服务器端口

如果我们想要设置开发服务器端口为8080，我们需要修改config/index.js文件中的dev对象，将port属性改为8080。

module.exports = {
  // ...
  dev: {
    // ...
    port: 8080,
    // ...
  },
  // ...
}

然后执行npm run dev命令重新启动项目即可。

示例2：安装并使用Element UI

如果我们想要在项目中使用Element UI，可以按照以下步骤进行：

1. 安装Element UI

npm install 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)

现在我们就可以在项目中使用Element UI组件了。例如，在我们的App.vue中添加一个按钮组件：

<template>
  <div>
    <el-button>Click Me!</el-button>
  </div>
</template>

然后重新启动项目即可看到我们添加的按钮组件了。