不使用vue-cli搭建vue2项目

叶不归宿lily

已于 2024-03-17 19:25:12 修改

阅读量858

点赞数 9

文章标签： vue.js 前端 javascript webpack

于 2024-01-08 23:01:02 首次发布

本文链接：https://blog.csdn.net/lily1570228436/article/details/135467918

版权

本文详细介绍了如何从头开始创建一个基于Vue2.x的项目，包括安装必要的依赖、配置webpack、使用style-loader和css-loader处理样式、集成HtmlWebpackPlugin以及设置webpack-dev-server。后续还涉及了使用Sass和Vue路由的扩展教程。

摘要由CSDN通过智能技术生成

一、开始

1、新建空文件夹vue2-demo

2、npm初始化：npm init -y

3、安装vue、webpack、webpack-cli、vue-loader

4、在项目根目录下新建文件

5、修改package.json入口文件为main.js

1、安装style-loader和css-loader

2、使用HtmlWebpackPlugin

新手学习建议不要一开始就使用脚手架

一、开始

1、新建空文件夹vue2-demo

2、npm初始化：npm init -y

会生成package.json文件

3、安装vue、webpack、webpack-cli、vue-loader

npm i vue@^2

npm i webpack@^4 webpack-cli@^4 -D

npm i vue-loader@^15 -D

4、在项目根目录下新建文件

index.html、main.js（入口文件）、app.vue、webpack.config.js（配置文件）

5、修改package.json入口文件为main.js

{
  "name": "vue2-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.7.16"
  },
  "devDependencies": {
    "vue-loader": "^17.4.2",
    "webpack": "^4.47.0",
    "webpack-cli": "^4.10.0"
  }
}

6、main.js

// main.js 入口文件
import Vue from 'vue';
import App from './app.vue'


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

7、app.vue

<template>
    <div>{{messgae}}</div>
</template>
<script>
export default {
    data(){
        return{
            messgae:'Hello Vue2'
        }
    }
}
</script>

8、index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>vue2-demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

9、webpack.config.js

vue-loader是.vue 文件的解析器，是一个webpack的loader。Vue Loader 的配置和其它的 loader 不太一样，需在配置中添加 Vue Loader 的插件

有关vue-loader的配置参见vue-loader

// webpack.config.js
const path = require('path');
const {VueLoaderPlugin  } = require('vue-loader')

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module:{
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
    ],
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

10、npx webpack 打包

命令行中输入npx webpack回车

如果安装17版本的vue-loader会报错TypeError: Cannot read properties of undefined (reading 'styles')

原因是vue-loader版本有问题，降为15版本即可，这就是一开始使用npm i vue-loader@^15 -D安装的原因

打包成功后会在dist文件夹中输出main.js，在index.html中引入打包后的文件

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>vue2-demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="app"></div>
        <script src="./dist/main.js"></script>
    </body>
</html>

浏览器打开index.html

注：如果你安装的vue版本是2.7以下的，还需要安装vue-template-compiler用来编译.vue文件中的<template>部分，2.7以上版本的vue自身提供了编译器compiler-sfc

二、增强

1、安装style-loader和css-loader

当你想为你的页面增加样式

<template>
    <div class="red">{{messgae}}</div>
</template>
<script>
export default {
    data(){
        return{
            messgae:'Hello Vue2'
        }
    }
}
</script>
<style>
.red{
    color: red;
}
</style>

webpack自身只会加载js、json；如需加载其他类型文件需使用相应的loader，不出意外的话打包会报错：

安装style-loader和css-loader

npm i -D css-loader@^5

npm i -D style-loader@^2

webpack的配置中增加一条匹配规则/\.css$/

style-loade的作用是在DOM中插入style标签，所以style-loader要放在css-loader后面执行

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

查看效果

2、使用HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin@^4

如果更改入口起点的名称，或者添加一个新的入口，那么会在构建时重新命名生成的 bundle，此时需要手动修改index.html中引入的文件

HtmlWebpackPlugin 会创建一个html文件，所有的 bundle 都自动添加到其中

// webpack.config.js
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module:{
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        }
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    // 使用HtmlWebpackPlugin
    new HtmlWebpackPlugin({
        template:'index.html'
    })
  ]
};

删除index.html中js的引用，因为HtmlWebpackPlugin 会帮我们自动引入

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>vue2-demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

现在的目录结构，dist中的index.html是HtmlWebpackPlugin用根目录下的index.html为模板帮我们生成的

3、设置打包的快捷方式

在 package.json 文件中添加一个 npm script

现在，可以使用 npm run build 命令替代之前使用的 npx 命令

4、webpack-dev-server

现在每次修改代码都要重新打包、刷新浏览器才能看到最新效果

webpack-dev-server为我们解决这个问题，它提供了一个基本的 web server，并具有实时重新加载的功能。webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中

webpack.config.js中添加如下代码

  devServer:{
    static: './dist'
  }

在package.json中添加一个script

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },

运行：npm run start

出现了一个警告，因为我们没有设置Webpack的mode。在配置文件中添加mode即可

mode: "development",

现在，已经可以大刀阔斧地开始业务代码开发了

三、完善

1、使用sass

使用sass，需要安装 sass（Dart Sass）和sass-loader。Vue组件库必备 Sass(Dart) 知识

npm i -D sass

npm i -D sass-loader@^10

修改配置的样式文件规则

        {
            test: /\.s[ac]ss$/,
            loader: ['style-loader', 'css-loader', 'sass-loader']
        }

测试一下，修改app.vue

<template>
    <div class="box">
        <span class="red">{{messgae}}</span>
    </div>
</template>
<script>
export default {
    data(){
        return{
            messgae:'Hello Vue2!'
        }
    }
}
</script>
<style lang="scss">
.box{
    .red{
        color: red;
    }
}

</style>

注：修改webpack配置需要重启服务才会生效