不借助 vue-cli 工具自行搭建 vue 项目

一、初始化项目

1.1、新建 package.json

npm init

1.2、安装依赖

npm 安装 vue、vue-router、vue-loader、webpack、webpack-cli，这些只是开发环境所需要的依赖，使用 --save-dev 安装到开发环境（见 package.json devDependencies）下：

npm install vue vue-router vue-loader webpack webpack-cli --save-dev

webpack 4.x 已经把 cli 单独拎出来了，所以还要安装 webpack-cli。webpack 本身其实直接能处理的只有 js 资源，是通过各种 loader 让其他资源可以被 webpack 打包处理。

用 vue 写单文件组件（.vue 文件），安装 vue-loader。

1.3、创建项目目录、文件

│  index.html
│  package.json
│  README.md
│
└─src
    │  App.vue
    │  main.js
    │  
    ├─assets
    │  └─images
    │          pic.png
    │          
    ├─components
    ├─router
    │      index.js
    │      
    ├─utils
    └─views
            About.vue
            Home.vue

src/App.vue

src/main.js

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

// 创建 Vue 实例
new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

index.html

二、webpack 基本配置

2.1、添加配置文件

根目录下新建 webpack.config.js，配置 webpack：

const path = require('path') // 系统路径模块
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入模板渲染插件
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块

module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 项目总入口 js 文件
  // 输出文件
  output: {
    path: path.join(__dirname, 'dist'), // 所有的文件都输出到 dist 目录下
    filename: 'bundle-[hash].js' // 输出文件的名称加上 hash 值
  },
  module: {
    rules: [{
        // 使用 vue-loader 解析 .vue 文件
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        // 要加上 style-loader 才能正确解析 .vue 文件里的