【进击的Vue(一)】搭建Vue全家桶

heiyehk
1,708 阅读3分钟

不要让自己的底限成为你的上限

本篇文章主要是讲vue全家桶(vue+vuex+vue-router+axios)的手动搭建过程，并且需要了解一定的npm命令。进掘金之后一直在白嫖，看着好多大佬写的文章又好。不过还是想自己能够学会总结项目经验然后分享出来，往更高的地方发展。如果有需要优化的地方或者有更好的建议可以在评论区留言（假装很多人看）。

Vue初始化

初始化npm环境

npm init -y && npm i

安装vue 以及初始化webpack

npm i vue -S

安装vue所需要的webpack插件

一把梭，里面有webpack服务，babel编译器，vue解析，命令行参数传递，url、style、css...解析等等，在这个安装过程会有点慢。

npm i webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler url-loader style-loader css-loader  babel-loader @babel/core html-webpack-plugin -D

所以先了解一下这些插件里面的知识点

了解知识点

  • package.json里面的devDependencies和dependencies

    • devDependencies
      开发应用时所依赖的工具包。通常是一些开发、测试、打包工具，例如 webpack、babel。应用正常运行并不依赖于这些包，用户在使用 npm i 安装你的包时也不会安装这些依赖。
    • dependencies
      应用能够正常运行所依赖的包，用户在使用 npm i 安装你的包时会自动安装这些依赖。

    通俗点讲dependencies就是在生产环境需要的在这里。

  • webpack
    webpack是一个静态模块打包器,通过递归方式的关系链打包程序所需要的。

  • babel
    babel是一个将es6代码转换成兼容低浏览器的es5代码。

创建webpack.config.js文件

在项目根目录创建webpack.config.js这个文件

webpack.config.js 点击展开代码 
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin') // html解析插件

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  entry: resolve('src/main.js'), // 项目总入口js文件 __dirname表示当前文件的路径
  // 输出目录
  output: {
    path: resolve('dist'), // 所有的文件都输出到dist/目录下
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(), // 解析vue文件内容
    new HtmlWebpackPlugin({
      template: resolve('public/index.html')
    })
  ],
  // 模块resolve的规则
  resolve: {
    // 别名配置，@默认指向src目录
    alias: {
      '@': resolve('src')
    }
  },
  devServer: {
    historyApiFallback: true, // 不跳转
    hot: true, // 热加载，不需要刷新页面就能加载出来
    inline: true, // 实时刷新
    stats: { colors: true } // 终端输出为彩色
  }
}

创建src目录下的入口文件main.js以及App.vue

main.js 点击展开代码 
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');
App.vue 点击展开代码 
<template>
  <div id="app">{{ msg }}</div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'HelloWorld'
    };
  }
};
</script>

创建public目录下的模板index.html

index.html 点击展开代码 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

文件创建完毕之后目录结构是这样的。

package.json中增加启动和打包命令

serve启动命令
build打包命令
-- hot热更新启动。
--mode xxx传入环境参数。

"scripts": {
    "serve": "webpack-dev-server --config webpack.config.js --hot --mode development",
    "build": "webpack --config webpack.config.js --mode production"
}

执行npm run serve之后，打开浏览器http://localhost:8080/默认是8080端口，也可以自行更改。

npm run build打包会自动在项目更目录生成dist文件夹以及项目关联的文件内容。

Vuex初始化

Vuex是专门为Vue.js开发的一款状态管理器，它主要用来集中储存所有组件的公共状态。

安装Vuex 状态管理器

安装：

npm i vuex -S

创建Vuex文件

在src目录下创建store文件夹，然后创建index.js文件。

index.js 点击展开代码 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store;
修改`main.js`代码 
import Vue from 'vue';
import App from './App.vue';
+ import store from './store';
new Vue({
+ store,
  render: h => h(App)
}).$mount('#app');

修改App.vue代码

<template>
- <div id="app"></div>
+  <div id="app">
+    <div class="msg">{{ msg }}</div>
+    <div class="store-count">{{ storeCount }}</div>
+  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'HelloWorld'
    };
  },
+  computed: {
+    storeCount() {
+      this.$store.commit('increment');
+      return this.$store.state.count
+    }
+  }
};
</script>

这样就是可以成功使用Vuex状态管理器了。

vue-router初始化

Vue Router 是 Vue.js 官方的路由管理器。这里的路由就是SPA（单页应用）的路径管理器，只有一个页面。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。

安装vue-router

npm i vue-router -S

创建router文件

在src目录下创建router文件夹，然后创建index.js文件。

import Vue from 'vue';
import VueRouter from 'vue-router';
import main from '@/views/main.vue' // @ => 别名，在webpack.config.js配置了

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'main',
    component: main
  }
];

const router = new VueRouter({
  routes
});

export default router;

然后在src目录下放页面组件main.vue。

main.vue:

<template>
  <div class="main">main</div>
</template>

修改入口文件main.js

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

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

修改App.vue中的代码加入识图窗

<template>
  <div id="app">
    <div class="msg">{{ msg }}</div>
    <div class="store-count">{{ storeCount }}</div>
+    <router-view />
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'HelloWorld'
    };
  },
  computed: {
    storeCount() {
      this.$store.commit('increment');
      return this.$store.state.count;
    }
  }
};
</script>

vue-router默认是hash模式，可以根据自己所需要进行更换。

Axios初始化

本文暂时不讲axios拦截以及封装，在后续会专门发布项目方面的优化。

安装axios

npm i axios -S

axios使用方法

在入口文件main.js中，在vue的原型加入axios。

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';
+ import axios from 'axios';

+ Vue.prototype.$http = axios;

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

然后在main.vue中进行请求，这里拿一言的接口做示范。

<template>
  <div class="main">main</div>
</template>

<script>
export default {
  created() {
    this.$http.get('https://v1.hitokoto.cn').then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }
}
</script>

成功请求到数据。

文章到这里就结束，vue项目搭建会上传到GitHub，需要的朋友可以自行拉取，后面的文章会以此为基础。如果有需要优化的地方或者有更好的建议可以在评论区留言（假装很多人看）。
Github仓库：github.com/heiyehk/web…
代码分支在: /tree/dev/20200617-webpack-vue-init

avatar
文章
阅读
粉丝