webpack 构建 vue 项目

最新推荐文章于 2023-03-19 08:46:36 发布

qq_43341422

最新推荐文章于 2023-03-19 08:46:36 发布

阅读量115

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/qq_43341422/article/details/102788935

版权

前端框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

nrm 的安装使用

作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；

镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；

运行 npm i nrm -g 全局安装nrm包；
使用 nrm ls 查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
使用nrm use cnpm 切换不同的镜像源地址；

注意： nrm 只是单纯的提供了几个常用的下载包的 URL地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的装包工具，都是 npm

webpack 的安装

全局安装：运行npm i webpack -g 命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

webpack 是基于 node.js 开发的，安装 webpack，必须先安装其依赖 node.js

检查 node.js 和 webpack 安装成功命令：node -v / webpack -v，查看其版本号，可以确定是否安装成功

webpack 构建 vue 项目

运行 npm init 初始化项目(生成 package.json 文件)
创建项目基本目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JjVaIxHq-1572267960068)(D:\work\前端\前端笔记\资源图片\基本目录结构.png)]
运行 npm i vue -S 将 vue 安装为运行依赖（生成 node.modules）
运行 npm i vue-loader vue-template-compiler -D 将解析转换vue的包安装为开发依赖
运行 npm i style-loader css-loader -D 将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式
运行 npm i webpack-dev-server --save-dev 安装到开发依赖
修改 package.json 文件，在 scripts 节点下新增 "dev": "webpack-dev-server" 指令（实时打包）

dev": "webpack-dev-server --open --port 3000 --
contentBase src --hot"

运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
webpack.config.js 文件进行配置

// 导入处理路径的模块
var path = require('path');

// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //配置 webpack 打包时需要指定的入口文件和输出文件的路径
    // 项目入口文件
    entry: path.resolve(__dirname, 'src/main.js'),

    // 配置输出选项
    output: {
        // 配置输出的路径
        path: path.resolve(__dirname, 'dist'),
        // 配置输出的文件名
        filename: 'bundle.js'
    },
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            //模板路径
            template:path.resolve(__dirname,
                'src/index.html'),
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ],
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.vue$/, use: 'vue-loader' }
        ]

    }
}

定义一个 .vue 结尾的组件，其中，组件有三部分组成template script style

<template>
    <!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根
    元素进行包裹，一般都用 div 当作唯一的根元素 
    -->
    <div>
        <h1>这是APP组件 - {{msg}}</h1>
        <h3>我是h3</h3>
    </div>
</template>

<script>
/*注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象*/
export default {
    data() {
        return {
        	msg: 'OK'
        }
    }
	methods: {
        show() {
        	console.log("调用了 login.vue 中的 show 方法");
        }
    }
}
</script>

<style scoped>
h1 {
	color: red;
}
</style>

在 main.js 中，导入 vue 模块 import Vue from 'vue'

注意：在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式

导入功能完整的 vue 包的方法：

方法一：

import Vue from '../node_modules/vue/dist/vue.js'

方法二：

按包的查找规则找到 main 属性，修改 main 属性的值

包的查找规则：

找项目根目录中有没有 node_modules 的文件夹
在 node_modules 中根据包名，找对应的 vue 文件夹
在 vue 文件夹中，找一个叫做 package.json 的包配置文件
在 package.json 文件中，查找一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

方式三：（推荐使用）

修改配置文件

module.exports = {
  resolve: {
    alias: { // 修改 Vue 被导入时候的包的路径
       "vue$": "vue/dist/vue.js"
    }
  }
}

在 main.js 中，导入组件 import login from 'components/App.vue'
在 main.js 中，创建 vm 的实例

var vm = new Vue({
    el: '#app',
    data: {
    	msg: '123'
    },
/* 
    render: function (createElements) { 
        return createElements(login)
    } 
*/
	//简写形式
	render: c => c(login)
})