vue 从零开始不使用官方 vue-cli 搭建脚手架

目前所有教程都是从 vue-cli 开始
所以尝试从头搭建一次，不使用 vue-cli 官方脚手架，而是从使用 vue 开始，搭建一个自己的脚手架,以便学习

安装依赖

vue 使用 webpack 打包发布，所以需要安装 vue 和 webpack ,以及其他的依赖

进入目录后执行：

npm init

会自动创建 package.json 文件

随后安装依赖

npm install vue vue-loader webpack webpack-cli

vue-loader 是为了能解析 .vue 结尾的文件

添加一些文件（这些文件可以用vue 编写）
目录如下

.
├── dist/
|	├── ...
├── src/
├── ├── components/HelloWorld.vue
|	├── main.js
|   ├── App.vue
├── node_modules/
|	├── ...
├── package.json
├── index.html

注意：我是直接复制 vue-cli 项目的 hello-world 文件，所以还需要额外安装一个依赖，用来解析 template 文件

npm install vue-template-compiler

主要的四个文件 main.js,App.vue,HelloWorld.vue,index.html 内容如下：

由于 vue-cli 创建的 Hello-world 工程有 png 文件，需要额外安装插件，所以删除了 png 文件

main.js

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

Vue.config.productionTip = false

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

App.vue

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一个用 vue + webpack 搭建的脚手架框架</title>
</head>

<body>
    <div id="app"></div>

    <script src="/dist/bundle.js"></script>
</body>

</html>

webpack 配置

创建一个 webpack.config.js 文件

内容如下：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
   entry: path.join(__dirname, 'src/main.js'), // 项目总入口js文件
   // 输出文件
   output: {
       path: path.join(__dirname, 'dist'), // 所有的文件都输出到dist/目录下
       filename: 'bundle.js'
   },
   module: {
       rules: [{
               // 使用vue-loader解析.vue文件
               test: /\.vue$/,
               loader: 'vue-loader'
           },
           {
               test: /\.css$/,
               // 要加上style-loader才能正确解析.vue文件里的<style>标签内容
               use: ['style-loader', 'css-loader']
           }
       ]
   },
   plugins: [
       new VueLoaderPlugin() // 最新版的vue-loader需要配置插件
   ]
};

配置具体信息按行有解释

由于需要进行 style 和 css 解析

所以需要安装两个解析插件：

npm install style-loader css-loader

添加脚本

在 package.json 文件的 scripts 属性里添加 build 脚本

"build": "webpack --config webpack.config.js"

添加后：

   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.config.js"
   },

执行脚本

此时只需要执行 npm run build 即可，在 dist 目录就会生成 js 文件，将其部署就可以了

将 index.html 和 dist/bundle.js 部署到服务器，打开就可以看到 helloworld 页面了

在最新 vue-cli 中，隐藏掉了 webpack.config.js 文件配置，其它依赖，以及部署也可以一键完成，

在 vue-cli 中，依赖了 eslint,babel 等工具
而如果从头构建，需要耗费大量时间

本篇文章仅仅探究一下 vue-cli 是如何开始构建的，不至于使用了 vue-cli ，但不知道它究竟在干什么，做了什么，怎么回事

other

在使用 npm run build 是，总是提示警告，没有配置打包模式，在 webpack.config.js 文件中添加 mode 即可

module.exports = {
    ...
    ...
    ...
    plugins: [
        new VueLoaderPlugin() // 最新版的vue-loader需要配置插件
    ],
    mode:'development'
};

development 表示开发模式