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

最新推荐文章于 2024-01-08 23:01:02 发布

xian1989717

最新推荐文章于 2024-01-08 23:01:02 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/xian1989717/article/details/104125437

版权

不使用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$': '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底部
       })
   ]
}

安装热更新插件

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>

index.js:

import Vue from 'vue';
import App from './App.vue';

new Vue({
    render:h=>h(App)
}).$mount('#app')

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>

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

xian1989717

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
不使用vue-cli来配置vue项目

不使用vue-cli来配置vue项目之前都是用脚手架去进行配置vue项目，现在想手动配置vue项目。所以通过这个博客来记录一下自己的配置过程。工具：1. vscode2. node3. npm步骤：使用npm初始化项目 npm init//如果想省事可以使用下面的命令 npm init -y安装基本的npm包 npm i vue vue-loader w...
复制链接

扫一扫