Vue npm 项目构建 教程

1、项目简述

这几天正在学习Vue全家桶，Vue的体系比较庞大、涉及的内容也比较多，少数几张帖子很难系统的学习Vue，在这里模拟搭建一个Vue的环境，还在学习中，如有不到还请见谅。

2、开发环境

编辑器：vsCode
推荐使用vsCode，对比了几个编辑器工具，vscode的功能最为好用。

3、vue项目搭建

3.1、插件以及对应配置文件创建

3.1.1、nodejs、npm安装

nodejs、npm安装教程请查看我之前写的这个帖子：	
https://blog.csdn.net/jrgdspuwij/article/details/104577548

3.1.2、babel 实现 ES6

在终端输入命令

# 第一步
npm install  --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
@第二步
npm install  --save @babel/polyfill
#第三步
项目跟目录创建文件 babel.config.js

3.1.3、webpack

先创建一个空白项目，根目录创建src目录
在终端输入命令

#初始化package.json文件
npm init -y
#安装jquery插件
npm install jquery -S
#安装webpack
npm install webpack webpack-cli -D
#手动在项目根目录下创建webpack.config.js文件
module.exports = {
	mode:'development'	//开发者模式
	//mode:'production' //生产环境模式
}
#在package.json配置文件中的scripts节点下,新增dev脚本
'scripts':{
	'dev':'webpack'	//scripts节点下的脚本，可以通过npm run 执行
}
#测试打包
npm run dev

打包之后dist文件夹中会生成main.js文件，在index.html中可以引用main.js文件进行使用。

3.1.4、webpack-自动打包配置

1、安装自动打包工具

#安装自动打包工具
npm install webpack-dev-server -D

2、修改package.json文件

'scripts':{
	#配置自动打包工具
	#--open自动打开网站
	#--host设置ip地址
	#--port设定端口号
	'dev':'webpack-dev-server --open --host 127.0.0.1 --port 8888'
}

3、	修改打包入口、出口

#修改webpack.config.js
#引用path插件，支持路径支持
const path = require('path')
#配置打包设置
module.exports = {
    mode:'development',
    entry:path.join(__dirname,'./src/index.js'), //打包入口文件路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'bundle.js' //输出文件名称
    }
}

4、修改index.html引用js方式

#index.html引用方式改为/hundle.js
#webpack会将bundle.js放入内存中，index.html可以直接从根目录引用到(但是根目录中看不到bundle.js文件)
<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>

5、自动打包处理

#执行打包命令
npm run dev

自动打开http://localhost:8888网页

看到如下图片说明已经成功自动打包运行了。

浏览器自动打开网页，点击src可查看index.html文件

3.1.5、生成预览页面（不需要点击src才能看到预览页）

1、安装html-webpack-plugin插件、修改相关配置文件

#安装
npm install html-webpack-plugin -D
#修改webpack.config.js,添加如下内容
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
      template:'./src/index.html',//指定要用到的模板文件
      filename:'index.html'//指定生成的文件的名称,该文件存在于内存中,在目录中不显示
})
#修改webpack.config.js文件向外暴露配置对象，新增如下配置节点
modules.export = {
    plugins:[htmlPlugin] //plugins是一个数组对象，webpack打包期间用到的插件列表
}

运行 npm run dev后自动打开网站，同时自动打开index.html页面（不需要再点击src）

3.1.6、配置加载器

1、加载器介绍

通过loader 打包非js模块

        loader						加载器可以打包处理      .less 相关文件
        sass-loader					加载器可以打包处理      .scss相关文件
        url-loader        			加载器可以打包处理      .css中与url路径相关的文件

在实际开发中，webpack默认只能打包处理以.js结尾的模块，其他非.js结尾的模块webpack默认不处理。
需要调用loader加载器才可以正常打包，否则报错。
loader加载器协助webpack打包处理特定的文件模块。

2、安装css文件加载器

#安装处理css文件的loader
npm i style-loader css-loader -D
#在webpack.config.js的module -> rules 数组中，添加loader规则
module:{
    rules:[
              {test:/\.css$/, use:['style-loader','css-loader']}
          ]
}
#其中test表示匹配的文件类型，use表示对应要调用的loader。
#注意:use数组中指定的loader顺序是固定的、多个loader的调用顺序是：从后往前调用。

3、安装less文件加载器

#安装组件
npm i less-loader less -D
#修改webpack.config.js配置文件
module:{
    rules:[
        {test:/\.less$/, use:['style-loader','css-loader','less-loader']}
    ]
}
# 安装插件
npm i sass-loader node-sass -D
#修改webpack.config.js配置文件
module:{
       rules:[
           {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']}
       ]
}
#安装css打包插件
npm i postcss-loader autoprefixer -D
#修改webpack-config.js
module:{
    rules:[
          {test:/\.css$/, use:['style-loader','css-loader','postcss-loader']}
      ]
}
#安装打包预编译样式插件
npm i url-loader file-loader -D
#修改webpack.config.js
#?之后的是参数项，只有小于这个大小的图片才会被转为base64（单位是字节）
module : {
    rules:[
        {
            test:/\.jdp|png|gif|bmp|ttf|eot|svg|woff|woff2$,
            use:'url-loader?limit=16940'
        }
    ]            
}
#安装支持高级语法插件
#babel转换器相关的包
npm i babel-loader @babel/core @babel/runtime -D
#babel语法插件相关的包
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
#根目录创建babel配置文件 babel.config.js
#初始化babel.config.js配置文件
module.exports = {
   presets:['@babel/preset-env'],
   plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
#修改webpack.config.js的module -> rules 数组中，添加loader
#exclude排除项，表示babel-loader不需要处理node_modules中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}