不使用脚手架构建vue项目

达拉崩巴斑得贝迪卜多比鲁翁_

已于 2022-07-22 10:03:41 修改

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js webpack javascript

于 2022-07-21 11:29:05 首次发布

原文链接：https://blog.csdn.net/meis27461/article/details/120035131

环境以及工具

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 打包项目