webpack4+Vue搭建自己的Vue-cli项目过程分享

下面我就来详细讲解“webpack4+Vue搭建自己的Vue-cli项目过程分享”的完整攻略。

1. 创建Vue项目

使用Vue-cli可快速搭建Vue项目结构。首先，我们需要全局安装Vue-cli：

npm install -g vue-cli

然后，运行以下命令来创建Vue项目：

vue init webpack my-project
cd my-project
npm install

这里使用了 webpack 模板来创建Vue项目，你也可以选择 browserify 模板或者其他的模板。

2. 配置Webpack

2.1 添加Less支持

首先，我们需要安装 less 和 less-loader：

npm install less less-loader --save-dev

然后，在 build/webpack.base.conf.js 文件中添加以下代码：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ],
      },
    ]
  },
  // ...
}

这样就可以在Vue组件中使用 less。

2.2 配置代理

在开发环境中，我们可能需要跨域请求API。就需要配置Webpack的代理。

在 config/index.js 文件中，找到以下代码：

dev: {
  // ...
  proxyTable: {},
  // ...
}

在 proxyTable 中添加接口代理配置，如：

proxyTable: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

这样，所有以 /api 开头的接口请求都会被代理到 http://localhost:3000上，实现跨域请求。

3. 添加Vue插件

3.1 添加Vue-router支持

我们可以使用Vue-router来实现前端路由功能，首先需要安装Vue-router：

npm install vue-router --save

然后，在Vue项目中引入Vue-router，并配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

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

在上面代码中，我们定义了一个路由 /，对应的组件是 Home.vue。

最后，在 main.js 文件中引入并使用路由：

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

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.2 添加Vuex支持

Vuex是Vue的状态管理库，可以用来管理应用程序的状态。首先需要安装Vuex：

npm install vuex --save

然后，在Vue项目中创建一个Vuex store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在上面代码中，我们定义了一个名为 count 的状态。 mutations 中定义了一个方法 increment，用来修改这个状态的值。 actions 中定义了一个异步方法 incrementAsync，用来调用 mutations 中的方法。

最后，在 main.js 文件中引入并使用Vuex：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

现在，我们已经成功添加了Vue-router和Vuex支持。

4. 示例说明

4.1 Vue-router示例

我们在上面已经添加了Vue-router支持，下面为大家演示一个示例。

在 src/views 目录下创建一个 About.vue 组件：

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page</p>
  </div>
</template>

<script>
export default {}
</script>

然后，在路由文件中添加对应路由：

import About from '@/views/About.vue'

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

现在，当我们访问 http://localhost:8080/about 时，就可以看到 About.vue 组件了。

4.2 Vuex示例

我们已经成功添加了Vuex支持，下面为大家演示一个示例。

我们在 src/views 目录下创建一个 Counter.vue 组件：

<template>
  <div>
    <h1>Counter</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

在上面代码中，我们使用了Vuex的 mapState 和 mapActions 辅助函数来映射 count 状态和 increment 方法，使其可以在组件中直接使用。

接着，在 store.js 中添加对应的状态和方法：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

现在，当我们在 Counter.vue 点击 Increment 按钮时，就可以看到 count 的值会增加了。

以上就是“webpack4+Vue搭建自己的Vue-cli项目过程分享”的完整攻略。