• 不使用脚手架构建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

    • 1

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

    2. 安装相关依赖

    安装webpack

    npm install webpack webpack-cli --save-dev

    • 1

    安装Vue3和解析模块

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

    • 1
    • 2
    • 3

    安装css解析模块

    npm install css-loader
npm install style-loader

    • 1
    • 2

    对比一下文件差异

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

    • 1
    • 2
    • 3
    • 4

    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"
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

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

    创建文件夹和文件

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    接下来我们配置各个文件
    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()
    ]
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    配置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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    配置src > App.vue 文件

    <template>
    <div>hello world</div>
</template>

<style>
	div{color:red;}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    配置 src > main.js 文件

    import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

    • 1
    • 2
    • 3
    • 4
    • 5

    修改package.json文件

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    运行项目

    // 编译项目
npm run build

    • 1
    • 2

    运行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

    • 1

    安装webpack-dev-server

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

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

    • 1

    配置开发环境

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    配置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'
+	    }
 	};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    添加启动命令

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    启动项目

    npm run dev

    • 1

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

    三、安装各种工具

    使用less和less的解析器

     npm install less less-loader

    • 1

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    使用Typescript

    安装ts和ts的解析模块

    npm install typescript ts-loader

    • 1

    安装 vue-class-component

    npm install vue-class-component

    • 1

    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$/],
+            }
+        },
    ],


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    接下来是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
}

    • 1
    • 2
    • 3
    • 4
    • 5

    接下来是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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    一个最简化的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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    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()
   ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

    npm install @babel/polyfill -S

    • 1

    配置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();
    ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    配置打包命令
    在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"
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    配置Vue文件

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    //index.html
<body>
    <div id="app"></div>
</body>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    完整的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()
    ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

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

  • 相关阅读:
    舵机电流测试
    打造综合性品牌阵地 阿里元境引领元宇宙营销创新升级
    Java的Escape Analysis和锁优化
    【推荐10个 让你轻松的 IDEA 插件，少些繁琐又重复的代码】
    谷粒商城 高级篇 (三) --------- ElasticSearch 分词
    六、组件的生命周期与组件间之间的数据共享
    3.1 FiRa标准——UCI通用规范（一）
    Python+Pytest+Request【第一章】接口框架介绍
    51单片机DAC数模转换
    使用MSYS2和UPX显著缩小发布文件体积
  • 原文地址：https://blog.csdn.net/weixin_46034375/article/details/125908833