自己动手简单搭建Vue项目

最近工作不好找啊！只好在家复习了，学着学着就像用了这么久的vue-cli脚手架了为什么不自己搭建一个那？于是今天就跟着文档手动搭建了一个。

废话不多说啦！开始我们的搭建吧！！！！！

首先我们需要在目录下生成一个packjson.json文件

npm init

然后我们需要安装各种的依赖：
我们知道要编译.vue文件的话我们需要vue-loader

npm i vue-loader --save

我们还需要vue

npm i  vue --save

.vue文件中那我们需要用的是css和js和编译template模板(官网介绍说明：官网说明)

npm i css-loader --save
npm i vue-style-loader --save
npm install -D babel-loader @babel/core @babel/preset-env webpack
npm i babel-loader --save
npm i vue-template-compiler --save

到了这一步我们已经把.vue需要的插件安装完成了，下面我们需要安装webpack的插件
那我们需要把这插件在webpack.config.js中使用（这个在vue-loader中官网有给出默认的配置：文档）这不做介绍了！！

const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                  ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]

首先我们知道在npm run dev的时候webpack会默认给我们启动项目并且创建一个基于nodejs的环境：那么我们需要webpack-dev-server来完成

npm i webpack-dev-server --save

并且我们需要在packjson中配置npm run dev语句

"dev": "webpack-dev-server"

并且我们需要在webpack.config.js中配置webpack-dev-server（还不熟悉的童鞋需要先去了解下webpack-dev-server啦！！！）

const webpack = require('webpack')
module.export = {
	...,
	devServer: {
        open: true, // 默认是否打开窗口
        port: 3000, // 配置端口
        hot: true, // 是否热加载
        host: '127.0.0.1'
    },
    plugins: [
    	...,
        new webpack.HotModuleReplacementPlugin()
    ]
}

我们还需要html-webpack-plugin里编译我们的html

module.export = {
	plugins: [
        ...,
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
}

我们开始创建我们的目录吧
首先我们需要创建一个index.html文件

...,
	<div id='app'></div>
...,

一个App.vue文件

<template>
    <div id='app'>
        hello vue
    </div>
</template>

<script>
export default {
    name: 'App',
    data () {
        return {}
    },
    methods: {}
}
</script>
<style>
    
</style>

一个index.js文件

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

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

到此时我们已经完成了 让我们运行npm run dev试试吧
浏览器会自动打开页面我们开到了期待已久的hello vue

自己在开搭建时遇到的一个小问题

// index.js  一直报错后来看了文档才是到
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

后来改成了就可以了

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

看到管的文档才知道：
因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：（文档说明：文档）

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

到这里就结束了 一个简单的脚手架都搭建完成了（主要是自己写着玩的，顺便分享出来大家互相交流）