前端入门（二）npm包管理+模块化+bable转码器+webpack打包+vue-element-admin

最新推荐文章于 2023-07-11 07:00:00 发布
最新推荐文章于 2023-07-11 07:00:00 发布
阅读量481 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40707462/article/details/115489471
版权

一、npm包管理工具

NPM全称Node Package Manager，是Node.js包管理工具，相当于前端的Maven 。不需要单独安装，和nodejs一起

在命令提示符输入 npm -v 可查看当前npm版本

1、项目初始化

创建npm文件夹，右键文件夹–>在终端中打开，输入npm init

按照提示输入相关信息，如果是用默认值则直接回车即可。

#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目

#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

#如果想一次性生成 package.json 文件，那么可以使用命令
npm init -y

2、修改镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

终端输入：
npm config set registry https://registry.npm.taobao.org

查看npm配置信息
npm config list

3、下载依赖npm install

3.1、默认

模块默认安装的位置：项目目录\node_modules

同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 

npm install jquery

会出现node_modules文件夹和package-lock.json文件
package-lock.json会锁定版本
在这里插入图片描述

3.2、特定

下载特定版本的依赖
npm install jquery@2.1.x

只在当前工作区使用
npm install --save-dev eslint
#或简写
npm i -D eslint

下载全局依赖
安装位置：用户目录\AppData\Roaming\npm\node_modules
npm install --global webpack
#或简写
npm install -g webpack

根据依赖下载安装包
（npm管理的项目在备份和传输的时候一般不携带node_modules文件夹，
安装会自动在项目目录下添加 package-lock.json文件，
这个文件帮助锁定安装包的版本）
npm install

3.3、其他

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

二、模块化

1、搭建框架

在这里插入图片描述
新建modularization文件夹–>终端打开–>初始化
里面新建src文件夹，src下新建01.js和02.js
在这里插入图片描述

2、测试代码

在这里插入图片描述
01.js

export default{//写在default里就可以被别的调用
    list(){
        console.log("list...")
    },
    save(){
        console.log("save...")
    }
}

02.js

import user from './01.js'//引入 给01起名user
//调用
user.list()
user.save()

3、执行+bable转码器

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

3.1、安装

在modularization重新打开终端，全局安装

npm install -g babel-cli
#查看是否安装成功
babel --version

3.2、配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录（modularization）下，该文件用来设置转码规则和插件，presets字段设定转码规则
设置转成es2015

{
"presets": ["es2015"],
"plugins": []
}

3.3、安装转码器

在modularization目录终端中安装

npm install -D babel-preset-es2015

会生成node_modules文件夹存放es2015一些信息

3.4、转码运行

在modularization目录下新建dist文件夹，存放src中文件的转码

babel src -d dist

在dist目录下运行

node 02.js

可以运行啦

三、webpack打包

webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

1、全局安装

新建webpack文件夹，npm init -y初始化，安装

npm install -g webpack webpack-cli

安装后查看版本号

webpack -v

2、代码

src目录–>01.js 和 02.js 和 main.js
01.js

exports.info=function (str) {
    document.write(str)//通过浏览器访问页面输入
}

02.js

exports.add=function (a, b) {
    return a+b
}

main.js

const a=require('./01.js')//为了不bable直接用es6代码
const b=require('./02.js')
a.info('Hello world!'+b.add(1, 2))

3、打包

webpack目录下创建配置文件webpack.config.js
webpack目录下新建dict文件夹存放打包后文件

constpath=require("path") //Node.js内置模块
module.exports= {
    entry: './src/main.js', //配置入口文件
    output: {
        //path: path.resolve(__dirname, './dist'), 
        //输出路径，__dirname：当前文件所在路径
        //【不知道为什么注释掉path才能用，会自动生成在dist下】
        filename: 'pack.js'//输出文件
    }
}

更简便的方法：

不需要自己键dist文件夹，也不需要webpack.config.js

①在package.json中加入

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

②把要打包的文件命名为index.js
因为package.json规定了入口时index

③webpack终端下

npm run build

会自动生成dist文件夹，里面打包好的函数命名为main.js

④扩展package.json
dev当用户使用该模式的时候，会打包出包含注释和格式等未压缩状态的代码
production当用户使用该模式的时候，会打包出最小的压缩生产环境代码

npm run dev 这个时候dist里面的文件的不是压缩过的
npm run build 这个时候dist的main.js就是压缩了的

默认production

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack",
    "dev":"webpack --mode development",
    "production":"webpack --mode production"   
  },

4、测试

webpack目录下新建01.html

<body>
    <script src="./dist/bundle.js"></script>
</body>

5、css打包

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install -D style-loader css-loader

修改webpack.config.js：

constpath=require("path") //Node.js内置模块
module.exports= {
    entry: './src/index.js', //配置入口文件
    output: {
        //path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js'//输出文件
    },
module: {
    rules: [  
                {  
    test: /\.css$/,    //打包规则应用到以css结尾的文件上
    use: ['style-loader', 'css-loader']
                }  
            ]  
        }       
}

在src文件夹创建style.css

body{
background:pink;
}

修改main.js
在第一行引入style.css

require('./style.css')

运行编译命令

npm run dev

四、vue-element-admin

1、简介

vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

精简版vue-Admin-template：https://github.com/PanJiaChen/vue-admin-template

2、安装

1）使用git克隆安装步骤

也可直接下载zip，将解压后的vue-admin-template-master复制到工作区中（yygh文件夹下），可以改个名vue-admin-template-test

里面也有package.json文件（npm初始化后也有），里面有很多依赖，需要根据里面的版本下载依赖
在这里插入图片描述
2）终端打开：npm install，会出现node_modules文件夹

3）启动：npm run dev，会跳转浏览器，默认9528端口
在这里插入图片描述

3、框架了解

在这里插入图片描述

3.1、package.json

运行npm run dev后，会找到build/webpack.dev.conf.js文件
在这里插入图片描述
build/webpack.dev.conf.js文件中会找到build/webpack.base.conf
在这里插入图片描述
build/webpack.base.conf中有一个entry，规定了程序的入口是/src/main.js
在这里插入图片描述

3.2、config/index.js

主机名和端口号，可以改
在这里插入图片描述

代码自动检查插件，默认是true，需要去下载扩展，可以改成false
在这里插入图片描述

3.3、config/dev.env.js

定义后端接口路径，可以改成localhost：8201之类的
在这里插入图片描述

3.4、src

api–定义接口地址（列表、登录、注册。。。引用request模块，调用远程api）
views–视图，指用ajax调用接口
router–路由，点击不同路由显示不同内容
utils–全局工具（引入axios模块，定义全局的axios实例，并导出模块）
assets–静态资源（图片。。。）
icons–图标、js文件。。。

4、模拟登录

此时直接登录会报错
在这里插入图片描述
在开发者工具–network里查看
在这里插入图片描述
默认这个easy-mock的服务器有问题，改成本地就可以了
以后可以在config/dev.env.js中修改BASE_API:’ "http://127.0.0.1:8201 " ’

如果还没有后端接口只是想先登录，在src/store/modules/user.js中

1）找到actions里的登录login操作，将图中选中括号内全注释掉，data设置为固定值，而不需要再请求接口
在这里插入图片描述

 const data={"token":"admin"}
 setToken(data.token)
 commit('SET_TOKEN', data.token)

2）其他类似

  actions: {
    // 登录
    Login({ commit }, userInfo) {

      const data={"token":"admin"}
      setToken(data.token)
      commit('SET_TOKEN', data.token)

      // const username = userInfo.username.trim()
      // return new Promise((resolve, reject) => {
      //   login(username, userInfo.password).then(response => {
      //     const data = response.data
      //     setToken(data.token)
      //     commit('SET_TOKEN', data.token)
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })

    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      const data = {'roles':'admin',name:'admin','avatar':'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'}
      if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
        commit('SET_ROLES', data.roles)
      } else {
        reject('getInfo: roles must be a non-null array !')
      }
      commit('SET_NAME', data.name)
      commit('SET_AVATAR', data.avatar)
      // return new Promise((resolve, reject) => {
      //   getInfo(state.token).then(response => {
      //     const data = response.data
      //     if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
      //       commit('SET_ROLES', data.roles)
      //     } else {
      //       reject('getInfo: roles must be a non-null array !')
      //     }
      //     commit('SET_NAME', data.name)
      //     commit('SET_AVATAR', data.avatar)
      //     resolve(response)
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 登出
    LogOut({ commit, state }) {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      // return new Promise((resolve, reject) => {
      //   logout(state.token).then(() => {
      //     commit('SET_TOKEN', '')
      //     commit('SET_ROLES', [])
      //     removeToken()
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 前端 登出
    FedLogOut({ commit }) {
      //return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
      //})
    }
  }

说明：token是我们手动配置的，如果过期后续自行生成，后续会有TokenHelper类生成token，在此不用关注

3）修改\src\util\request.js
config.headers[‘token’] = getToken()

5、修改路由

在这里插入图片描述
1）src/rooter.index.js中：
在这里插入图片描述
2）src/views/table/index.vue中：
在这里插入图片描述
3）再去src/api/table.js:
这个url默认和config/dev.env.js里的BASE_URL一起构成完整路径
在这里插入图片描述
4）在src/utils/request.js中引入js文件，使用axios调用接口，把接口返回数据在页面显示

qq_40707462
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HelloAbp:ABP vNext + vue-element-admin入门级项目实战
04-13
vue-element-admin入门级项目实战运行环境：.netcore 3.1、sqlserver、nodejs、npm修改Xhznl.HelloAbp.HttpApi.Host、Xhznl.HelloAbp.DbMigrator项目的数据库连接字符串运行/run/db-migrator.bat（初始化数据库、...
前端项目架构分析
实践求真知
11-22 3870
一 目录结构 ├── build // 构建相关 ├── config // 配置相关 ├── src // 源代码 │ ├── api // 所有请求 │ ├── assets // 主题 字体等静态资源 │ ├── components // 全局公用组件 │
前端框架前置知识—Node.js之模块化、npm与包、模块加载机制
Z_J_Xx的博客
01-03 389
学习vue框架，react框架，工程化开发项目必备知识！
webpack基础篇搭配（Vue + Element）
无知者无畏
04-24 504
webpack前端项目构建工具 1. 当前 Web开发面临的困境 文件依赖关系错综复杂 静态资源请求效率低 模块化支持不友好 浏览器对高级Javascript 特性兼容程度较低 etc… 2.webpack概述 webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。 webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问...
vscode中使用npm安装babel
yan的秘密基地
08-01 1919
文章目录前言一、检查是否已经安装了npm二、配置bable三、在VScode中进行配置 前言 上篇介绍了nodejs的安装配置，这篇来介绍一下在VScode里面怎么使用bable。 bable是一个广泛使用的ES6转换器，可以将ES6代码转为ES5代码 一、检查是否已经安装了npm 在cmd中输入npm -v 得到版本号，现在新版的nodejs在安装的时候已经自动安装了npm。 还是那句话，最好还是以管理员身份打开终端。 二、配置bable 在终端中安装bable，输入 npm install –g
风尚云网学习-vue-element-admin安装问题
05-18 1652
风尚云网学习-vue-element-admin安装问题
vue-xuAdmin：vue + element-ui-admin后台权限管理模板演示地址：
02-06
vue + element-ui无限级菜单权限管理后台模板 :house: 作者 :bust_in_silhouette: 倪荣旭 电子邮件： 先决条件 节点> = 6.0.0 npm> = 3.0.0 更新日志 v1.2.5 增加DllPlugin优化生成速度，编译速度缩短yarn ...
本资源是基于micro-app+vue-element-admin实现的微前端
05-04
本资源是基于micro-app+vue-element-admin实现的微前端的搭建、打包、部署等过程 1、代码下载后需要在基座，子应用1，子应用2中分别npm install安装依赖包 2、运行npm run dev，也是每一个应用都需要运行 3、打包npm...
tp6-vue-admin:基于thinkphp6+vue2.6+element2.13 前后端分离落地解决方案
05-02
#thinkphp6+vue2.6+element2.13 前后端分离落地解决方案 本人开发环境版本信息： ...#注意4：如果只运行vue-admin前端，则可以把代理转到 #注意5：登录验证码，使用组件对think-captcha 进行修改，适
template-vue-admin:vue2 + vuex + element-ui管理后台模板
03-21
template-vue-admin 说明 eslint airbnb验证 stylelint标准验证 部分功能需要调整支持，可以直接查看原始里的使用方式（如快照上传，图片裁剪等） babel-eslint如果升级到9以上（包含9），会导致i18n里的语言懒加载...
前端工程npm以及bable出现的问题解决
beginner1227的博客
11-02 278
LinkID=135170 中的 about_Execution_Policies。babel : 无法加载文件 \babel.ps1，因为在此系统上禁止运行脚本。1:babel无法加载文件:babel.ps1 问题解决。(2)使用cmd窗口,能看到版本号确定成功,电脑重启。1.找到vscode打开属性,按照下图操作执行即可。2.如果上面操作之后仍未成功,没有出现版本号。(1)确定node.js是否安装成功。所在位置 行:1 字符: 1。
npm命令与package.json包管理
qq_39756331的博客
06-02 2608
npm命令
npm中的.package-lock.json包管理配置文件 package.json自己创建的包配置文件（npm init -y）
weixin_47295886的博客
09-01 710
即可用来记录项目中安装了哪些包，从而方便在我们剔除node_modules目录之后。-------------------根据这个安装包。会出现这种情况：整个项目的体积是30M 第三方包即node_modules文件夹的体积是28M，所以我们项目源代码才2M——.package-lock.json包管理配置文件,是npm官方规定的必须提供的，用来记录与项目有关的一些配置的信息。（记录项目中安装了哪些包）解决方案： 在项目根目录中，创建一个。——在执行命令所处的目录中，快速新建。...
18.npm包管理文件package.json指南
魏大大
05-27 613
package.json 指南 如果您使用 JavaScript，或者您曾经与 JavaScript 项目、Node.js 或前端项目进行过交互，那么您肯定会遇到 package.json 文件。 那个有什么用途？ 你应该知道什么，你可以用它做什么很酷的事情？ package.json 文件是您项目的清单。 它可以做很多事情，完全不相关。 例如，它是工具配置的中央存储库。 它也是 npm 和 yarn 存储所有已安装包的名称和版本的地方。 文件结构 这是一个示例 package.json 文件： { }
Maven 基本使用及依赖管理。
yzh2776680982的博客
09-30 2492
1、主要功能提供了一套标准化的项目结构提供了一套标准化的构建流程（编译，测试，打包，发布……）提供了一套依赖管理机制2、标准化的项目结构：项目结构我们都知道，每一个开发工具（IDE）都有自己不同的项目结构，它们互相之间不通用。我再eclipse中创建的目录，无法在idea中进行使用，这就造成了很大的不方便，而Maven提供了一套标准化的项目结构，所有的IDE使用Maven构建的项目完全一样，所以IDE创建的Maven项目可以通用。
vue-element-admin的讲解
qq_51269815的博客
01-16 6317
一：文件结构讲解 1.文件价格 package.json文件防止模板所需要的各种依赖，npm install 就是安装这些 index.js文件放置的是路由 main.js文件放置初始化，加载所需要的插件 public下index.html 时一个模板文件，作用是生成项目的入口文件 二：登录模块 登录逻辑：当用户填写完账号密码后向服务端验证是否正确，验证通过后，服务端会返回一个token，拿到token后（可将token存到cookie中，保证页面刷新后可以记住用户登录状态），前端会根据token拉取一个
npm 包和模块简介
最新发布
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
07-11 1561
公共npm注册表是JavaScript包的数据库，每个包都由软件和元数据组成。开源开发人员和公司的开发人员使用npm注册表向整个社区或其组织的成员贡献包，并下载包在自己的项目中使用。
vue前端进阶（学完这篇直接整vue-element-admin）
weixin_47615289的博客
08-14 1107
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，==早期网站主要内容都是静态，以图片和文字为主==，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。[2]...
babel安装及使用
热门推荐
张大晴的博客
11-03 1万+
参考文档： http://www.ruanyifeng.com/blog/2016/01/babel.html 下边两个是内容一样 https://blog.csdn.net/huangzhaoyang8888/article/details/80705363 https://zhuanlan.zhihu.com/p/28143410 前提:安装好node环境 第一步： 在本地项目路...
快速搭建Vue前端项目：vue-element-admin实践
在本文中，我们将深入探讨如何搭建一个基于Vue和Element-UI的前端项目，以`vue-element-admin`为例，它是一个功能丰富的后台管理前端解决方案。首先，我们需要从GitHub上获取项目源代码，并了解其基本目录结构和关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值