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

admin · 发表于 2024-5-7 17:44:17

一、初始化项目
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

<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 以下转为 base64
name: '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
└─views
About.vue
Home.vue

复制代码

游客，本帖隐藏的内容需要积分高于 2 才可浏览，您当前积分为 0

提取码下载：

文件名称:提取码下载.txt
下载次数:0 文件大小:12 Bytes 售价:3金钱 [记录]
下载权限: 不限 [购买VIP] [充值] [在线充值] 【VIP会员5折；永久VIP免费】

安全检测，请放心下载

		自动登录	找回密码
密码			立即注册

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

相关帖子