不使用脚手架构建vue项目

环境以及工具

nodeJS - 基于 Chrome V8 引擎的 JavaScript 运行环境
npm - nodeJS的包管理工具

编译依赖

webpack- 模块打包器
webpack-cli - webpack的依赖

插件

html-webpack-plugin - 简化Html的插件

项目依赖

vue - vue项目依赖
vue-loader - vue3.0解析器
@vue/compiler-sfc vue-template-compiler的升级版
css-loader - css解析器
style-loader - css-loader的依赖
webpack-dev-server - 基本的 web server

各种工具的依赖

less - less css预处理语言
less-loadder - less的解析器

typescrip - javascript的超集
ts-loader - ts的解析模块
vue-class-component - 可让您以类样式语法制作 Vue 组件的一个库

一、先让Vue3能够运行

1.初始化

npm init -y

如果你的目录下出现了package.json文件，说明成功。

2. 安装相关依赖

安装webpack

npm install webpack webpack-cli --save-dev

安装Vue3和解析模块

npm install vue@next
npm install vue-loader@next
npm install @vue/compiler-sfc

安装css解析模块

npm install css-loader
npm install style-loader

对比一下文件差异

//当安装好上述依赖之后，你的目录看起来应该是这样的 |-/node_modules|-package.json|-package-lock.json

package.json文件应该是这样的

{"name": "test","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^5.51.1","webpack-cli": "^4.8.0"},"dependencies": {"@vue/compiler-sfc": "^3.2.6","vue": "^3.2.6","vue-loader": "^16.5.0"}
}

3.编写项目文件和配置webpack

创建文件夹和文件

//创建好的目录看起来应该是这样的 |-/node_modules|-/dist |-index.html|-/src|-App.vue|-main.js|-package-lock.json|-package.json|-webpack.config.js

接下来我们配置各个文件
webpack.config.js
dist > index.html
src > App.vue
src > main.js
package.json

配置webpack.config.js文件

const path = require('path');
//vue-loader@next版本之后需要引入这个插件
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {entry: './src/main.js',    //打包的入口//设置打包的出口output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),},//设置别名resolve:{alias: {'@': path.join(__dirname, 'src')},},//添加模块module:{rules:[{//设置.vue文件的解析规则test: /\.vue$/,loader: 'vue-loader'},{//设置css的解析规则test:/\.css$/,use:[{loader:'style-loader'},{loader:'css-loader'},]},{//设置加载图片资源的规则test: /\.(png|jpe?g|gif)$/i,type: 'asset/resource'},],},devtool: 'inline-source-map',   //错误追踪工具plugins:[new VueLoaderPlugin()]
};

配置dist > index.html 文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>起步</title>
</head>
<body><div id="app"></div><script src="main.js"></script>
</body>
</html>

配置src > App.vue 文件

<template><div>hello world</div>
</template><style>div{color:red;}
</style>

配置 src > main.js 文件

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.mount('#app')

修改package.json文件

主要是使项目私有化，以及增加一个build编译命令
注意，这里只展示了部分代码，并不是全部，请参照带有“+”、“-”符号进行增加或删除，后续基于原有文件进行修改的示例都将会采用这种方式展示。

 {"description": "",-        "main": "index.js", //符号“ - ”代表删除这一行代码+        "private": "true",  //符号“ + ”代表添加这一行代码"scripts": {+         "build": "webpack"},}

运行项目

// 编译项目
npm run build

运行npm run build命令等待编译完之后，双击打开dist > index.html 文件，如果页面出现红色字体的hello world那说明Vue3项目运行成功了。

做到这一步，我们的项目已经可以编译运行了，但还远远达不到开发环境的标准，我们不能该一行代码运行一遍npm run build，并且dist也不会每次编译都会自动生成，接下来我们来完善一下。

二、完善开发环境

1.安装html-webpack-plugin

htmlWebpackPlugin能让你省去在dist下创建index.html的麻烦，它能够自动根据main.js创建html文件，或者可以自定义模板。

npm install --save-dev html-webpack-plugin

安装webpack-dev-server

webpack-dev-server提供了一个基本的web server环境，并且内置了热更新功能，但是我们并不需要，因为vue-loader已经有热更新了

npm install --save-dev webpack-dev-server

配置开发环境

新建一个html模板给html-webpack-plugin
目录下新建一个public文件夹，再新建一个index.html放到public目录下

 ...|-/dist
+  |-/public
+      |-index.html|-/src...

index.html文件内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div>
</body>
</html>

配置html-webpack-plugin 和 webpack-dev-server
webpack.config.js文件

 const path = require('path');//vue-loader@next版本之后需要引入这个插件const { VueLoaderPlugin } = require('vue-loader')
+  const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/main.js',    //打包的入口//设置打包的出口output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),
+          clean:true  //每次打包会清除之前的代码},/...中间代码忽略.../plugins:[new VueLoaderPlugin(),
+          new HtmlWebpackPlugin({+              filename:'index.html',    //配置输出后的html文件名（可携带目录）
+              template:'./public/index.html'    //配置模板
+          })],//配置webpack-dev-server将dist下的目录代理到web server
+      devServer: {+          static:'./dist'
+      }};

添加启动命令

 ..."private": "true","scripts": {"build": "webpack",
+      "dev": "webpack serve --mode development"},"keywords": [],...

启动项目

npm run dev

命令执行完毕后，我们可以通过上图红框的地址访问我们的项目。
到了这一步，我们已经有了一个简易的Vue3的开发环境了，实现了热更新开发，和打包项目的基本功能。

三、安装各种工具

使用less和less的解析器

 npm install less less-loader

webpack.config.js 以下为部分代码

...
//在module下的rules添加解析less的规则
{test:/\.less$/,use:[{loader:'style-loader'},{loader:'css-loader'},{loader:'less-loader'}]
}
...

使用Typescript

安装ts和ts的解析模块

npm install typescript ts-loader

安装 vue-class-component

npm install vue-class-component

webpack.config.js增加配置

 resolve:{alias: {'@': path.join(__dirname, 'src')},
+      extensions: ['vue', '.js', '.ts']},...rules:[
+        {+            test: /\.tsx?$/,
+            loader: 'ts-loader',
+            exclude: /node_modules/,
+            options:{+                appendTsSuffixTo:[/\.vue$/],
+            }
+        },],

项目根目录新建一个tsconfig.json文件

{"compilerOptions": {"sourceMap": true,// 严格模式"strict": true,// 处理模块"moduleResolution": "node",// 编译输出 ES5 版本"target": "es5",// 启用装饰器"experimentalDecorators": true}
}

接下来是src目录下的main.js，改个后缀就可以了，把js改成ts。
然后src目录下新增一个声明文件shims-vue.d.ts

declare module '*.vue' {import type { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}

接下来是App.vue文件中的sciprt部分

<script lang="ts">import { Vue, Options } from "vue-class-component";@Options({created(){const a:string = '123'console.log(a)}})export default class App extends Vue {}
</script>

一个最简化的Vue3+ts运行环境就完成了，后续可以根据自己需要配置相关框架和插件

项目示例地址：https://gitee.com/mqtt_lv/vue3.0-webpack-manual

vue2.0项目

依赖：

npm install --save vue
npm install --save vue-router
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-env
npm install --save-dev css-loader style-loader
npm install --save-dev less less-loader
npm install --save-dev url-loader
npm install --save-dev html-webpack-plugin
npm install --save-dev vue-loader vue-template-compiler

vue-loader 用于解析.vue文件
vue-template-compiler 用于编译模板配置如下

let VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {module:{rules:[{test:/\.vue$/,use:['vue-loader']},]},plugins:[new vueLoaderPlugin()]
}

babel-loader是将ES6等高级语法转换为能让浏览器能够解析的低级语法
@babel/core是babel的核心模块，编译器。提供转换的API
@babel/preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5

{test:/\.jsx?$/,use:{loader:'babel-loader',options:{presets:['env']}},exclude:/node_modules/
},

注意：babel-loader只会将 ES6/7/8等高级语法转换为ES5语法，但是对新api并不会转换。比如Promise、Iterator、Set、Proxy、Symbol等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。此时，我们必须使用babel-polyfill，为当前环境提供一个垫片

npm install @babel/polyfill -S

配置webpack-dev-server进行热更新

let Webpack = require('webpack');
module.exports = {devServer:{contentBase: './src',port:8001,hot:true,//热更新open:true,//自动启动浏览器inline:true,//文件内容修改，浏览器自动刷新historyApiFallback:true,// 单页面应用切路由不刷新（history模式）proxy:{//配置跨域'api':{target:'http://localhost:8000',changeOrigin:true,secure:false}}},plugins:[new Webpack.HotModuleReplacementPlugin();]
}

配置打包命令
在package.json中的scripts中配置

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server","build": "webpack","cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js"
}

配置Vue文件

//App.vue
<template><div id="app">This is my Vue!!</div>
</template>

//index.html
<body><div id="app"></div>
</body>

//main.js
import Vue from 'vue';
import App from './App.vue'
new Vue({render: h => h(App)
}).$mount('#app');

完整的webpack.config.json文件如下

let HtmlWebpackPlugin = require('html-webpack-plugin');
let VueLoaderPlugin = require('vue-loader/lib/plugin');
let Webpack = require('webpack');
module.exports = {entry:'./src/main.js',output:{path:__dirname + './dist',filename: "bundle.js"},devtool:'eval-source-map',devServer:{contentBase: './src',port:8001,hot:true,open:true,inline:true,historyApiFallback:true,proxy:{'api':{target:'http://localhost:8000',changeOrigin:true,secure:false}}},module:{rules:[{test:/\.js$/,use:{loader:'babel-loader',options:{presets:['env']}},exclude:/node_modules/},{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.less$/,use:['style-loader','css-oader','less-loader']},{test:/'\.(png|jpg|gif|woff|ttf)$'/,use:'url-loader'},{test:/\.vue$/,use:'vue-loader'}]},plugins:[new HtmlWebpackPlugin({template:'./src/index.html'}),new VueLoaderPlugin(),new Webpack.HotModuleReplacementPlugin()]
}

npm run dev 项目运行起来
npm run build 打包项目