Vue3.0项目搭建指南

前言

本指南作用于帮助开发人员更清晰的了解Vue3.0的常用框架及其生态之间的关系，以及在不借助cli脚手架的情况下一步步将项目组装起来。

提示：文章篇幅较长，建议收藏观看

文中所使用所有相关依赖如下

环境以及工具
nodeJS v.14.16.0 - 基于 Chrome V8 引擎的 JavaScript 运行环境
npm v6.14.11 - nodeJS的包管理工具

编译依赖
webpack v5.51.1 - 模块打包器
webpack-cli v4.8.0 - webpack的依赖

插件
html-webpack-plugin v5.3.2 - 简化Html的插件

项目依赖
vue v3.2.6 - 这个不用我多说了把
vue-loader v16.5.0 - vue3.0解析器
@vue/compiler-sfc v3.2.6 - vue-template-compiler的升级版
css-loader v6.2.0 - css解析器
style-loader v3.2.1 - css-loader的依赖
webpack-dev-server v4.1.0 - 基本的 web server

各种工具的依赖
less v4.1.1 - less css预处理语言
less-loader v10.0.1 - less的解析器

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

一口气安装

npm install webpack webpack-cli html-webpack-plugin vue vue-loader @vue/compiler-sfc css-loader style-loader webpack-dev-server less less-loader

一、先让Vue3能够运行

1.初始化

> npm init -y

npm init -y的-y能够让你省去填写初始化信息的步骤
如果你的目录下出现了package.json文件，说明成功。

2.安装相关依赖

  1. 安装webpack
    注意这里是在本地安装，而不是全局安装。

    > npm install webpack webpack-cli --save-dev

  2. 安装Vue3和解析模块

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

  3. 安装css解析模块

    > npm install css-loader
> npm install style-loader

  4. 对比一下文件差异（可以忽略版本）

    //当安装好上述依赖之后，你的目录看起来应该是这样的
————————————————————
 |-/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

  1. 创建文件夹和文件

    //创建好的目录看起来应该是这样的
——————————————————————
 |-/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

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

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

  4. 配置src > App.vue 文件

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

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

  5. 配置 src > main.js 文件

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

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

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

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

4.运行项目

// 编译项目
> 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

2.安装webpack-dev-server

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

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

3.配置开发环境

  1. 新建一个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>
  2. 配置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'
+	    }
 	};
  3. 添加启动命令
    	...
	  "private": "true",
	  "scripts": {
	    "build": "webpack",
+	    "dev": "webpack serve --mode development"
	  },
	  "keywords": [],
	...

4.启动项目

> npm run dev

配置正确的话应该是图下所示
在这里插入图片描述
命令执行完毕后，我们可以通过上图红框的地址访问我们的项目。
到了这一步，我们已经有了一个简易的Vue3的开发环境了，实现了热更新开发，和打包项目的基本功能。
下面放上到这个步骤的项目代码。
github仓库地址

三、安装各种工具

1.使用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'}
	 ]
}
...

在代码里的style标签添加 lang属性，安装scss啥的，都这个逻辑，先下载，在配置解析规则，然后使用。
在这里插入图片描述

2.使用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运行环境就完成了，后续可以根据自己需要配置相关框架和插件

待更新。。。。

# webpack
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue