06-NPM包管理器

一、简介

1、什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

2、NPM工具的安装位置

我们通过npm 可以很方便地下载js库，管理前端工程。

Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules

在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具

安装npm

在安装nodejs时候，把npm也会安装上

查看是否安装使用命令： npm -v

二、使用npm管理项目

1、创建文件夹npm

2、项目初始化

#建立一个空文件夹，在命令提示符进入该文件夹执行命令初始化

npm init

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

#name: 项目名称

#version: 项目版本号

#description: 项目描述

#keywords: {Array}关键词，便于用户搜索到我们的项目

#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

#我们之后也可以根据需要进行修改。

#如果想直接生成 package.json 文件，那么可以使用命令

npm init -y

2、修改npm镜像

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

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

设置镜像地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载

npm config set registry https://registry.npm.taobao.org

#查看npm配置信息

npm config list

3、npm install命令的使用

#使用 npm install 安装依赖包的最新版，

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

#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本

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

npm install jquery

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹

npm install #根据package.json中的配置下载依赖，初始化项目

#如果安装时想指定特定的版本

npm install jquery@2.1.x

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖

#使用 -D参数将依赖添加到devDependencies节点

#本工作区可用

npm install --save-dev eslint

#或

npm install -D eslint

#全局安装

#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules

#一些命令行工具常使用全局安装的方式

npm install-g webpack

4、其它命令

#更新包（更新到最新版本）

npm update 包名

#全局更新

npm update -g 包名

#卸载包

npm uninstall 包名

#全局卸载

npm uninstall -g 包名

07-Babel

一、简介

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

二、安装

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install --global babel-cli

#查看是否安装成功

babel --version

三、Babel的使用

1、初始化项目

npm init -y

2、创建文件

src/example.js

下面是一段ES6代码：

// 转码前

// 定义数据

let input=[1,2,3]

// 将数组的每个元素 +1

input=input.map(item=>item+1)

console.log(input)

2、配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{

"presets": [],

"plugins": []

}

presets字段设定转码规则，将es2015规则加入 .babelrc：

{

"presets": ["es2015"],

"plugins": []

}

3、安装转码器

在项目中安装

npm install --save-dev babel-preset-es2015

4、转码

# --out-file 或 -o 参数指定输出文件

babel es6/01.js --out-file dist1/001.js

# 或者

babel es6/01.js --o dist1/001.js

# 整个目录转码

# --out-dir 或 -d 参数指定输出目录

babel src --out-dir dist2

# 或者

babel es6 -d dist1

08-模块化

一、模块化简介

1、模块化产生的背景

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）了。

2、什么是模块化开发

传统非模块化开发有如下的缺点：

命名冲突

文件依赖

模块化规范：

CommonJS模块化规范

ES6模块化规范

二、CommonJS模块规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

1、创建“module”文件夹

2、导出模块

创建 common-js模块化/01.js

//创建js方法

// 定义成员：

const sum = function(a,b){

    return parseInt(a) + parseInt(b)

}

const subtract = function(a,b){

    return parseInt(a) - parseInt(b)

}

const multiply = function(a,b){

    return parseInt(a) * parseInt(b)

}

const divide = function(a,b){

    return parseInt(a) / parseInt(b)

}

导出模块中的成员

//设置哪些方法可以被其他js调用

// 导出成员：

module.exports={

    sum:sum,

    subtract:subtract,

    multiply:multiply,

    divide:divide

}

简写：

module.exports = {

    sum,

    subtract,

    multiply,

    divide

}

3、导入模块

创建 common-js模块化/02.js

//调用01.js里面的方法

//1、引入模块，注意：当前路径必须写 ./

const m = require('./01.js')

//2 调用

const result1 = m.sum(1,2)

const result2 = m.subtract(3,4)

console.log(result1,result2)

4、运行程序

E:\blog\1010\module\e5module> node 02.js

CommonJS使用 exports 和require 来导出、导入模块。

三、ES6模块化规范

ES6使用 export 和 import 来导出、导入模块。

因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

1、导出模块

创建 es6模块化/01.js

//定义方法，设置哪些方法可以被其他js调用

export function getList(){

console.log('获取数据列表')

}

export function save(){

console.log('保存数据')

}

2、导入模块

创建 es6模块化/02.js

//调用01.js的方法，引入01.js文件，进行调用

//只取需要的方法即可，多个方法用逗号分隔

import {getList,save} from "./01.js"

getList()

save()

3、运行程序

babel es61 -d es62

node 02.js

四、ES6模块化的另一种写法

1、导出模块

创建 es6模块化/01.js

export default{

    getList(){

        console.log('获取数据列表2')

    },

    save(){

        console.log('保存数据2')

    }

}

2、导入模块

创建 es6模块化/02.js

import m from './01.js'

m.getList()

m.save()

将ES6代码转为ES5代码：

babel es611 -d es622

运行程序：

09-Webpack

一、什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

二、Webpack安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

三、初始化项目

1、创建webpack文件夹

进入webpack目录，执行命令

npm init -y

2、创建src文件夹

3、src下创建common.js

exports.info = function(str){

document.write(str); //浏览器输出

}

4、src下创建utils.js

exports.add = function(a,b){

return a+b;

}

5、src下创建main.js

const common = require('./common.js');

const utils = require('./utils');

common.info('Hello world!' + utils.add(100,200));

四、JS打包

1、webpack目录下创建配置文件webpack.config.js

以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块

module.exports = {

    entry: './src/main.js', //配置入口文件

    output: {

        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径

        filename: 'bundle.js' //输出文件

    }

}

2、命令行执行编译命令

webpack#有黄色警告

webpack --mode=development#没有警告

#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

运行npm命令执行打包

npm run dev

3、webpack目录下创建index.html

引用bundle.js

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

4、浏览器中查看index.html

五、CSS打包

1、安装style-loader和 css-loader

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

Loader 可以理解为是模块和资源的转换器。

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

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

const path = require("path"); //Node.js内置模块

module.exports = {

    entry: './src/main.js', //配置入口文件

    output: {

        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径

        filename: 'bundle.js' //输出文件

    },

    module: {

                rules: [

                    {

                        test: /\.css$/,    //打包规则应用到以css结尾的文件上

                        use: ['style-loader', 'css-loader']

                    }

                ]

            }

}

3、在src文件夹创建style.css

body{

background-color: pink;

}

4、修改main.js

在第一行引入style.css

require('./style.css')

5、浏览器中查看index.html

打包：

index.html：

10-vue-element-admin

一、vue-element-admin

1、简介

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

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

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

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

2、安装

# 解压压缩包

# 进入目录

# 安装依赖

npm install

# 启动。执行后，浏览器自动弹出并访问http://localhost:9527/

npm run dev

二、vue-admin-template

1、简介

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

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

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

2、安装

# 解压压缩包

# 进入目录

# 安装依赖

npm install

# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/

npm run dev

11-后台系统前端项目创建

一、项目的创建和基本配置

1、创建项目

将vue-admin-template-master重命名为guli-admin

2、修改项目信息

package.json

3、如果需要修改端口号

config/index.js中修改

port:9528

4、项目的目录结构

5、运行项目

npm run dev

二、登录页修改

src/views/login/index.vue（登录组件）

4行

<h3 class="title">谷粒学院后台管理系统</h3>

28行

<el-button:loading="loading"type="primary"style="width:100%;"@click.native.prevent="handleLogin">

登录

</el-button>

三、页面零星修改

1、标题

index.html（项目的html入口）

<title>谷粒学院后台管理系统</title>

修改后热部署功能，浏览器自动刷新

2、国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

3、icon

复制 favicon.ico 到根目录

4、导航栏文字

src/views/layout/components（当前项目的布局组件）

src/views/layout/components/Navbar.vue

13行

<el-dropdown-item>

首页

</el-dropdown-item>

17行

<span style="display:block;" @click="logout">退出</span>

5、面包屑文字

src/components（可以在很多项目中复用的通用组件）

src/components/Breadcrumb/index.vue

38行

meta: { title: '首页' }

四、Eslint语法规范型检查

1、ESLint简介

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调适。

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。让程序员在编码的过程中发现问题而不是在执行的过程中。

2、语法规则

ESLint 内置了一些规则，也可以在使用过程中自定义规则。

本项目的语法规则包括：两个字符缩进，必须使用单引号，不能使用双引号，语句后不可以写分号，代码段之间必须有一个空行等。

3、确认开启语法检查

打开 config/index.js，配置是否开启语法检查

useEslint:true,

可以关闭语法检查，建议开启，养成良好的编程习惯。

4、ESLint插件安装

vs code的ESLint插件，能帮助我们自动整理代码格式

5、插件的扩展设置

选择vs code左下角的“设置”，打开 VSCode 配置文件,添加如下配置

"files.autoSave":"off",

"eslint.validate": [

"javascript",

"javascriptreact",

"vue-html",

{

"language":"vue",

"autoFix":true

}

],

"eslint.run":"onSave",

"eslint.autoFixOnSave":true

day04项目【项目前端相关基础知识二】

day04项目【项目前端相关基础知识二】

06-NPM包管理器

一、简介

二、使用npm管理项目

07-Babel

一、简介

二、安装

三、Babel的使用

08-模块化

一、模块化简介

二、CommonJS模块规范

三、ES6模块化规范

四、ES6模块化的另一种写法

09-Webpack

二、Webpack安装

三、初始化项目

四、JS打包

五、CSS打包

10-vue-element-admin

一、vue-element-admin

二、vue-admin-template

11-后台系统前端项目创建

一、项目的创建和基本配置

二、登录页修改

三、页面零星修改

四、Eslint语法规范型检查