用MySQL+node+vue做一个学生信息管理系统（一）：配置项目

news2024/11/25 0:43:04

先用npm init -y生成配置文件
在这里插入图片描述

在项目下新建src文件夹，app.js文件。src目录用来放静态资源文件，app.js是服务器文件，index.js是vue的入口文件

在这里插入图片描述

使用npm install express下载express框架

在app.js文件夹开启node服务，监听的端口为3000，并且开放静态资源文件的src目录

const express = require('express');
const app = express();
const path = require('path');
//开放静态资源访问，只需要输入文件名即可，不需要输入文件夹
app.use(express.static(path.join(__dirname,'src')));
app.listen(3000);

使用node app.js发现node服务启动成功
在这里插入图片描述

安装webpack：
1.运行npm install webpack webpack-cli -D命令
2.在项目根目录中，创建名为webpack.config.js的webpack配置文件
3.在webpack的配置文件中，初始化配置

module.exports = {
	mode:'development'//mode用来指定构建模式 production
}

4.在package.json配置文件中的scripts节点下，新增dev脚本如下：

"scripts":{
	"dev":"webpack"
}

5.使用npm run dev命令，启动webpack进行项目打包
6.webpack会帮我们创建一个dist目录，dist目录当中的main.js为低级的js代码

在这里插入图片描述

webpack配置打包的入口和出口:
默认打包的入口文件为src->index.js，打包的输出文件为dist->main.js文件
如果要修改打包的入口和出口，可以在webpack.config.js新增如下配置信息：

const path = require('path');
module.exports = {
	mode:'development',//mode用来指定构建模式 production
	entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
	output:{
		path:path.join(__dirname,'./src'),//输出文件的存放路径
		filename:'bundle.js',//输出文件的名称
	}
}

src目录下的bundle.js是webpack帮我们自动创建的，我们只需要在index.html当中引入bundle.js项目就能运行
在这里插入图片描述

打包处理css文件
1.运行npm install style-loader css-loader -D命令，安装处理css文件的loader
2.在webpack.config.js的module.rules数组中，添加loader规则如下：

module:{
rules:[
	{test:/.css$/,use:['style-loader','css-loader']},
]
}

test表示匹配的文件类型，use表示要用的loader

打包处理高级js语法：
1.npm install babel-loader @babel/core @babel/runtime -D
2.npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录中，创建babel配置文件babel.config.js并初始化配置如下：

module.exports = {
	presets:[ '@babel/preset-env' ],
	plugins:[ '@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties' ]
}

4.在webpack.config.js的module -> rules数组中，添加loader规则如下：

{ test:/.js$/,use:‘babel-loader’,exclude:/node_modules/}

vue单文件组件的使用方法，在src目录下新建components目录

webpack中配置vue组件的加载器：
1.运行npm install vue-loader vue-template-compiler -D
2.在webpack.config.js配置文件中，添加vue-loader的配置项如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
module:{
rules:[
	//…其他规则
	{ test:/.vue$/,use:'vue-loader'}
]
},
plugins:[
	//其他插件
	new VueLoaderPlugin()
]
}

在webpack项目中使用vue：
1.运行npm install vue -S安装vue
2.在src->index.js入口文件中通过import Vue from ‘vue’来导入vue构造函数
3.创建vue的实例对象，并指定要控制的el区域
4.通过render函数渲染App根组件

import Vue from 'vue'
import App from './components/App.vue'
const vm = new Vue({
	el:'#app',
	render:h=>h(App)
})

做完以上的配置时，在命令行工具输入npm run dev,打包成功,并且src目录下多了bundel.js文件，把这个bundle.js引入在index.html中，输入node app.js打开服务器

在这里插入图片描述

然后打开localhost：3000发现项目已经可以成功运行
在这里插入图片描述

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
	mode:'development',//mode用来指定构建模式 production
	entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
	output:{
		path:path.join(__dirname,'./src'),//输出文件的存放路径
		filename:'bundle.js',//输出文件的名称
	},
	module:{
		rules:[
			{test:/.css$/,use:['style-loader','css-loader']},
			{ test:/.js$/,use:'babel-loader',exclude:/node_modules/},
			{ test:/.vue$/,use:'vue-loader'}
		]
	},
	plugins:[
	//其他插件
	new VueLoaderPlugin()
	]
}