使用vue-cli创建vue2项目的实战步骤详解

下面就是使用vue-cli创建vue2项目的实战步骤详解：

步骤一：安装node.js和npm

在使用vue-cli创建vue2项目之前，需要先安装node.js和npm，这里就不再赘述了，如果还没安装的话可以到node.js官网下载安装包进行安装。

步骤二：安装vue-cli

使用npm全局安装vue-cli，执行如下命令：

npm install -g vue-cli

步骤三：创建vue2项目

创建vue2项目的命令格式如下：

vue init webpack 项目名称

执行该命令后，会让你填写项目名称、项目描述等信息，填写完成后就可以开始创建项目了。

步骤四：启动项目

进入到项目目录下，执行如下命令启动项目：

npm run dev

启动过程中可能会提示缺少依赖包，可以使用以下命令安装：

npm install

示例一：创建一个简单的包含路由的Vue2项目

首先进入到用于存放项目的文件夹，执行以下命令创建项目：

vue init webpack simple-vue-project

其中simple-vue-project为项目名称，随意命名即可。

接着，进入到项目目录下，执行以下命令安装vue-router：

npm install vue-router --save

然后，打开src目录下的main.js文件，添加如下代码：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: App }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这段代码的作用是：
1. 引入vue-router模块
2. 创建一个路由表，其中包含一个路径为/的路由，对应的组件为App
3. 创建一个VueRouter实例，并传入之前创建的路由表
4. 创建一个Vue实例，并将之前创建的VueRouter实例传入

最后，我们需要在App.vue组件中添加一个<router-view>用于显示路由内容。打开src目录下的App.vue文件，将<template>标签中的内容替换为如下代码：

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

这样，我们的简单Vue2项目就创建好了，执行npm run dev命令，打开浏览器访问http://localhost:8080即可查看效果。

示例二：创建一个带有Axios的Vue2项目

首先进入到用于存放项目的文件夹，执行以下命令创建项目：

vue init webpack axios-demo

其中axios-demo为项目名称，随意命名即可。

接着，进入到项目目录下，执行以下命令安装axios：

npm install axios --save

然后，打开src目录下的main.js文件，添加如下代码：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.prototype.$http = axios

new Vue({
  el: '#app',
  render: h => h(App)
})

这段代码的作用是：
1. 引入axios模块
2. 在Vue.prototype上挂载$http属性，值为axios
3. 创建一个Vue实例，并将之前创建的App组件挂载到#app上

最后，我们可以在App.vue组件中发送一个get请求来测试一下。打开src目录下的App.vue文件，将<script>标签中的内容替换为如下代码：

export default {
  name: 'app',
  mounted() {
    // 发送一个get请求
    this.$http.get('/api/hello').then(response => {
      console.log(response.data)
    }).catch(error => {
      console.log(error)
    })
  }
}

这里使用了代理，将'/api'代理到'http://localhost:3000'，在真实的应用中，应该根据实际情况进行修改。运行npm run dev，打开控制台查看输出即可。

好了，以上就是使用vue-cli创建vue2项目的实战步骤详解。