不借助 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└─viewsAbout.vueHome.vue

src/App.vue

<template><div id="app">{{message}}</div>
</template><script>
export default {name: "App",data() {return {message: "Hello!"}}
}
</script>

src/main.js

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

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>custom-project-vue</title>
</head><body><div id="app"></div>
</body></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 文件里的 <style> 标签内容use: ['style-loader', 'css-loader']}]},plugins: [new htmlWebpackPlugin({filename: 'index.html', // 生成的文件名称template: 'index.html', // 指定用 index.html 做模版inject: 'body' // 指定插入的 <script> 标签在 body 底部}),new VueLoaderPlugin()]
}

添加了一些引用 style-loader、css-loader，需要安装：

npm install html-webpack-plugin style-loader css-loader vue-template-compiler --save-dev

安装并引入 html-webpack-plugin 的目的是在打包项目的时候，在 dist 文件夹下也会生成 index.html 文件，也会添加上对出口文件的引用。

2.2、开启本地服务

webpack-dev-server 可以在本地启动一个服务器，而且当有任何文件修改的时候会自动重新打包，并且刷新浏览器页面。

安装 webpack-dev-server，配置本地开发环境：

npm install webpack-dev-server cross-env --save-dev

用上 cross-env 是因为要修改 package.json 里的 scripts，而不同的平台写 scripts 的方式不一样。

修改 package.json 里的 scripts：

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open --config webpack.config.js"},

执行 npm run dev，项目成功启动后会自动打开浏览器。

2.3、添加构建脚本

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

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open --config webpack.config.js","build": "webpack --config webpack.config.js"},

2.4、打包项目测试

完成以上配置后运行 npm run build 来构建项目，可以看到在当前目录下生成了一个 dist 目录，目录下有一个 bundle.js 和 index.html 文件，这就是打包好的项目。

2.5、添加图片、CSS 预处理器等 loader

图片 loader 用的是 url-loader，它依赖于 file-loader，比 file-loader 多了一个可以把小于一定大小的图片直接转化成 base64 的形式插入到 html 页面，可以减少网络请求。

安装依赖：

npm install file-loader url-loader node-sass sass-loader --save-dev

修改 webpack.config.js，在 module rules 下添加：

// ...
{test: /\.scss$/,use: [// 处理顺序是从 sass-loader 到 style-loader'style-loader','css-loader','sass-loader']
}, {test: /\.(gif|jpg|jpeg|png|svg)$/i,use: [{loader: 'url-loader',options: {// 当文件大小小于 limit byte 时会把图片转换为 base64 编码的 dataurl，否则返回普通的图片limit: 5120000, // 500k 以下转为 base64name: 'dist/assest/images/[name]-[hash:5].[ext]' // 图片文件名称加上内容哈希}}]
}
// ...

2.6、添加 postcss-loader + autoprefixer，自动添加 css 浏览器前缀

npm install postcss-loader autoprefixer --save-dev

新增 postcss 配置文件 postcss.config.js：

const autoprefixer = require('autoprefixer')module.exports = {plugins: [autoprefixer({browsers: ['last 5 versions']})]
}

webpack.config.js：

      {test: /\.css$/,// 要加上 style-loader 才能正确解析 .vue 文件里的 <style> 标签内容use: ['style-loader', {loader: 'css-loader',options: {importLoaders: 1}},'postcss-loader']},{test: /\.scss$/,use: [// 处理顺序是从 sass-loader 到 style-loader'style-loader','css-loader',{loader: 'postcss-loader',options: {sourceMap: true}},'sass-loader']},

2.7、添加 babel-loader，转译 es6 代码为 es5 代码

项目根目录创建 .babelrc 文件：

{"presets": ["env"]
}

安装依赖：

npm install babel-loader@7 babel-core babel-preset-env --save-dev

修改 webpack.config.js，module.rules 再加一条：

      {// 转译 es6 代码为 es5 代码test: /\.js$/,exclude: /(node_modules|bower_components)/, // 不处理这两个文件夹里的内容loader: 'babel-loader'}

2.8、清除旧的 bundle.js

每次修改文件，npm run build 之后，都会生成一个新的 bundle-[hash].js 文件，添加 clean-webpack-plugin，每次 build 之前可以自动先清除输出文件夹。

安装 clean-webpack-plugin：

npm install clean-webpack-plugin --save-d

修改 webpack.config.js，引入 clean-webpack-plugin 并在 plugins 数组添加一项：

const {CleanWebpackPlugin
} = require("clean-webpack-plugin") // 清除输出文件夹plugins: [new CleanWebpackPlugin()]

2.9、添加可以自动解析的扩展

import 的时候可以不用写后缀也能正确引用文件，例如：

import App from './App'

打开 webpack.config.js，添加 resolve：

  resolve: {extensions: ['.js', '.json', '.vue']},

三、路由配置

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]const router = new VueRouter({routes
})export default router

在 main.js 中引入路由配置文件：

import router from './router'

在 App.vue 中添加 router-link：

<template><div id="app"><router-view></router-view><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></div>
</template>

项目结构：

│  .babelrc
│  .gitignore
│  index.html
│  LICENSE
│  package-lock.json
│  package.json
│  postcss.config.js
│  README.md
│  webpack.config.js
│
├─dist
│      bundle-40277308b55fa87c0dd3.js
│      index.html
│
└─src│  App.vue│  main.js│  ├─assets│  └─images│          pic.png│          ├─components├─router│      index.js│      ├─utils└─viewsAbout.vueHome.vue

GitHub