不使用vue-cli来配置vue项目

admin · 发表于 2024-5-6 17:23:36

不使用vue-cli来配置vue项目

之前都是用脚手架去进行配置vue项目，现在想手动配置vue项目。所以通过这个博客来记录一下自己的配置过程。
工具：
1. vscode
2. node
3. npm
步骤：

使用npm初始化项目

npm init//如果想省事可以使用下面的命令
npm init -y

复制代码

安装基本的npm包

npm i vue vue-loader webpack webpack-cli --save-dev

复制代码

按照下面的结构创建文件以及文件夹

+ src
- app.vue
- index.js
- index.html
- webpack.config.js

复制代码

安装其它依赖

模板解析依赖

npm i vue-template-compiler --save-dev

复制代码

样式依赖

npm i style-loader css-loader --save-dev

复制代码

文件加载依赖

npm i file-loader --save-dev

复制代码

解析es6语法依赖

npm i -d babel-loader @babel/core @babel/preset-env webpack

复制代码

安装html-webpack-plugin插件，详细描述可以通过下面链接去查看
链接： html-webpack-plugin详解

npm i html-webpack-plugin --save-dev

复制代码

配置webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: path.join(__dirname, './src/index.js'),
// 输出
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [{
// 使用vue-loader解析.vue文件
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // 不处理这两个文件夹里的内容
loader: 'babel-loader'
},
{
test: /\.ts$/,
use: 'ts-loader'
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
] ,
},
]
},
resolve: {
// 解析模块请求的选项
// （不适用于对 loader 解析）
modules: [
'node_modules',
path.resolve(__dirname, 'app')
],
// 用于查找模块的目录
extensions: ['.js', '.json', '.jsx', '.css'],
// 使用的扩展名
alias: {
// 模块别名列表
'module': 'new-module',
// 起别名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
'only-module[list=1]
[*]安装热更新插件
[/list][code]npm i webpack-dev-server cross-env --save-dev

复制代码

修改package中的命令，这里就用到上面安装的热更新插件

{
"presets": [
""@babel/preset-env""
],
"plugins": [
"transform-vue-jsx"
]
}

复制代码

如果编译时报错的话，可能是因为你没有安装依赖：

npm i babel-plugin-syntax-jsx --save
npm i babel-preset-env --save
npm i babel-plugin-transform-vue-jsx --save

复制代码

主要文件

app.vue：

<template>
<div>测试</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

复制代码

[color=rgba(0, 0, 0, 0.75)]index.js:

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

复制代码

[color=rgba(0, 0, 0, 0.75)]index.html:

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

复制代码

这样就配置完成了，可以运行了。

: 'new-module',
         // 起别名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file"
         'module': path.resolve(__dirname, 'app/third/module.js'),
         // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
         // 模块别名相对于当前上下文导入
   },
   /* 可供选择的别名语法（点击展示） */
   /* 高级解析选项（点击展示） */
},
devServer: {
   host: '127.0.0.1',
   port: '8899',
   contentBase: path.join(__dirname, 'dist'), // boolean | string | array, static file location
   compress: true, // enable gzip compression
   hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
   // ...
},
mode: 'development',
// 插件
plugins: [
   new VueLoaderPlugin(),
   new HtmlWebpackPlugin({
         filename: 'index.html', // 生成的文件名称
         template: 'index.html', // 指定用index.html做模版
         inject: 'body' // 指定插入的<script>标签在body底部
   })
]
}
[/code]

安装热更新插件

npm i webpack-dev-server cross-env --save-dev

复制代码

修改package中的命令，这里就用到上面安装的热更新插件

 {
"presets": [
""@babel/preset-env""
],
"plugins": [
"transform-vue-jsx"
]
}

复制代码

如果编译时报错的话，可能是因为你没有安装依赖：

npm i babel-plugin-syntax-jsx --save
npm i babel-preset-env --save
npm i babel-plugin-transform-vue-jsx --save

复制代码

主要文件

app.vue：

<template>
<div>测试</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

复制代码

[color=rgba(0, 0, 0, 0.75)]index.js:

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

复制代码

[color=rgba(0, 0, 0, 0.75)]index.html:

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

复制代码

这样就配置完成了，可以运行了。

		自动登录	找回密码
密码			立即注册

不使用vue-cli来配置vue项目

相关帖子

浏览过的版块