标签：npm 文件 vue console 项目 第三天 js 在线教育 文件夹
前端开发
一、准备工作
安装vscode
网址：https://code.visualstudio.com/Download
推荐System版本 因为User版本是根据计算机用户安装的，换一个用户就使用不了了
官网下载很慢，可以将下载网址中的az764295.vo.msecnd.net换成vscode.cdn.azure.cn
安装的附加任务：
①将“通过code 打开“操作添加到windows资源管理器文件上下文菜单
②将“通过code 打开”操作添加到windows资源管理器目录上下文菜单
说明：①②勾选上，可以对文件，目录点击鼠标右键，选择使用 VScode 打开。
③将code注册为受支持的文件类型的编辑器
说明：默认使用 VScode 打开诸如 txt,py 等文本类型的文件，一般建议不勾选。
让 VScode 支持的代码文件全部变成 VScode 默认打开，文件图标也会随之更改，很好辨认。
④添加到PATH（重启后生效）
说明：这步骤默认的，勾选上，不用配置环境变量，可以直接使用。
参考：https://www.cnblogs.com/csji/p/13558221.html
https://www.cnblogs.com/kurrrr/p/14237006.html
https://www.cnblogs.com/csji/p/13558221.html
安装插件
点击Extensions
Chinese Microsoft
Live Server Ritwick Dey 内置服务器
Vetur Pine Wu vue代码字体颜色会改变
vue-helper shenjiaolong
创建工作区
在本地创建空文件夹 不要中文不要特殊符号
vscode打开文件夹
将文件夹另存为工作区
打开工作区，选择workspace后缀的文件
创建文件夹
点击新建文件夹按钮
创建文件
右键文件夹，新建文件01.html
输入!，回车，生成html模板
在代码编辑区右键open with Live Server打开电脑默认浏览器显示效果
默认端口号是5500
二、ES6
概念
ECMAScript 6.0 JavaScript语言的下一代标准 发布于2015.6
ES6是一套标准，JavaScript很好地遵循了这套标准
历史
1996年，JavaScript创造公司Netscape网景公司将JavaScript提交给ECMA组织，希望JavaScript可以成为国际标准
1997年，ECMA发布262号标准文件，规定了浏览器脚本语言的标准，称为ECMAScript，JavaScript是遵循ECMAScript的一种具体实现
现在大多数人遵循ECMAScript 6.0编写代码
ES6和ES5的区别
ES6的代码更加简洁，ES5的代码很复杂
ES6对于浏览器的兼容性很差，ES5的兼容性很好
一般使用ES6编写代码，用工具转为ES5去执行
基本语法
变量
js var a = 1;没有局部作用域 同一个变量可以声明多次
es6 let a = 1;有局部作用域 同一个变量只能声明一次
常量
声明时一定要赋值，且值不允许改变
解构赋值
数组解构 let [x, y, z] = [1, 2, 3];
对象解构
let user = {"name":"张三", "age":18};
let {name, age} = user;
注意解构得到的变量名和对象中的属性名要一致
模板字符串 `称为反引号
使用`符号实现换行
let str1 = `hello,
es6`;
使用`符号在字符串中插入变量和表达式，变量名和JavaScript表达式写在${}中
let name = "张三";
let age = 18;
let str2 = `hello，我叫${name}，今年${age}岁，明年${age+1}岁`;
使用`符号在字符串中调用函数
function f() {
return "have fun!";
}
let str3 = `Game start,${f()}`;
console.log(str3);
声明对象简写
const name = "张三";
const age = 18;
//传统
const p1 = {name:name, age:age};
//简写
const p2 = {name, age};
注意key value一样才可以简写
定义方法简写
//传统
const person1 = {
sayHi:function() {
console.log("Hi");
}
}
person1.sayHi();
//简写
const person2 = {
sayHi() {
console.log("Hi");
}
}
person2.sayHi();
对象拓展运算符
拷贝对象 let person2 = {...person1};
合并对象
let age = {age:20};
let name = {name:"李四"};
let person = {...age, ...name};
箭头函数
更加简洁的函数书写方式
基本语法：参数 => 函数体
//传统
var f1 = function(a) {
return a;
}
//箭头函数
var f2 = a => a;
var f3 = (a, b) => a + b;
常见错误
GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)
找不到浏览器标签页的图标，对运行程序没有影响
Uncaught SyntaxError: Unexpected token...
浏览器版本太低，无法解析代码
三、Vue
概念
用于构建用户界面的渐进式框架
入门案例
创建html页面，使用快捷键!
引入vue的js文件，类似于jQuery
复制vue.min.js到工作区文件夹vue中
<script src="vue.min.js"></script>
创建div，id为app，标识vue作用范围
编写vue代码，固定结构
新建一个vue，el绑定作用范围，data创建初始值
使用插值表达式可以取到data中的数据，如{{message}}
抽取vue代码片段
文件->首选项->用户片段->新建全局代码片段文件->输入文件名->回车
注意字符串中如果含有文件中复制过来的tab键的空格，要换成空格键的空格
根据代码片段的名字 输入快捷键vue htm回车即可生成代码片段
指令 v-开头
v-bind
单向数据绑定
一般用于标签属性里面，获取值
自己改变值，不影响别人
<div id="app">
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- 简写 -->
<h1 :title="message">
{{content}}
</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
content: '我是标题 鼠标悬浮显示加载时间',
message: '页面加载于' + new Date().toLocaleString()//当前系统格式
}
})
</script>
v-model
双向数据绑定
用于表单提交
自己改变值，别人也会跟着变
<div id="app">
<!-- 双向绑定 -->
<input type="text" v-model="searchMap.keyword" />
<p>{{searchMap.keyword}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyword: '橘子学院'
}
}
})
</script>
v-on
事件绑定
<div id="app">
<!-- 绑定事件，调用方法 方法的括号可加可不加-->
<button v-on:click="search()">查询</button>
<!-- 简写 -->
<button @click="search()">查询</button>
</div>
new Vue({
el: '#app',
data: {
searchMap: {
keyWord: '橘子学院'
},
result: {}//空对象
},
//方法
methods: {
search() {
console.log('search方法');
},
f1() {
console.log('f1方法');
}
}
})
单向数据绑定和事件绑定的结合
<div id="app">
<button @click="search()">查询</button>
<p>您要查询的是{{searchMap.keyWord}}</p>
<p><a :href="result.site" target="_blank">{{result.title}}</a></p>
</div>
<script>
new Vue({
el: '#app',
data: {
searchMap: {
keyWord: '橘子学院'
},
result: {}//空对象
},
methods: {
search() {
console.log('search');
this.result = {
title: '橘子学院',
site: "http://www.xm.com/orange"
}
}
}
})
</script>
修饰符
.prevent阻止事件的默认行为，而执行我们定义的方法
<div id="app">
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" name="name" v-model="user.name">
<button type="submit">保存</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
user: {}//空对象
},
methods: {
onSubmit() {
if (this.user.name) {
console.log('提交表单');
} else {
alert('请输入用户名');
}
}
}
})
</script>
条件渲染 v-if
v-if如果初始渲染时条件为false，则什么也不做，直到条件第一次变为true，才开始渲染条件块
v-show不管初始条件是什么，元素都会进行渲染，并且只是简单地基于css进行切换
v-if切换开销更高，而v-show初始渲染开销更高，频繁切换使用v-show，条件很少变化使用v-if
<div id="app">
是否同意用户条款？
<input type="checkbox" v-model="ok">是
<!-- 刚开始未勾选，ok绑定为false，则执行else
勾选后，ok绑定为true，执行if-->
<h1 v-if="ok">您已同意</h1>
<h1 v-else>您已拒绝</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
列表渲染v-for
简单的列表渲染
<ul>
<!-- 输出10个li，序号分别为1-10 每次遍历的值 in 遍历次数是固定格式-->
<li v-for="n in 10">{{n}}</li>
</ul>
<ul>
<!-- 输出10个li，n为1-10，index为0-9 -->
<li v-for="(n, index) in 10">{{n}} - {{index}}</li>
</ul>
遍历用户列表
<table border="1" cellspacing="0" cellpadding="0">
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
<script>
new Vue({
el: '#app',
data: {
userList: [
{id: 1, username: '张三', age: 18},
{id: 2, username: '李四', age: 19},
{id: 3, username: '王五', age: 20}
]
}
})
</script>
组件
概念
vue的构建基于组件，组件是vue最强大的功能之一
可以扩展html元素，封装可重用的代码
局部组件
<div id="app">
<!-- 组件用于扩展html的标签 -->
<Navbar></Navbar>
</div>
<script>
new Vue({
el: '#app',
//定义vue使用的组件
components: {
'Navbar': {
//模板
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})
</script>
全局组件
将组件的定义放在一个单独的js文件中，要使用时引入js文件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li></ul>'
})
实例生命周期
new Vue
beforeCreate
*created
数据渲染：数据显示到页面上
beforeMount
*mounted
如果数据渲染内容改变了，会执行beforeUpdate和updated
beforeDestroy
destroyed
在new Vue中加上created和mounted方法通过debugger进行测试
new Vue({
el: '#app',
data: {
},
created() {
debugger;
//在页面渲染之前执行
console.log("created");
},
mounted() {
debugger;
//在页面渲染之后执行
console.log("mounted");
}
})
f12开发者工具的半圆箭头按钮是向下一行一行执行，|>按钮是跳到下一个断点
执行程序打开页面f12，刷新会显示代码停在第一个断点的位置即created里面的断点，点击半圆箭头按钮会跳到mounted里面的断点，证明了created比mounted先执行
路由
菜单栏
注意引入vue-router要在引入vue之下
<div id="app">
<p>
<!-- 菜单栏 router-link默认被渲染为a标签-->
<router-link to="/">首页</router-link>
<router-link to="/student">学员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 点击菜单后响应内容显示的区域 -->
<router-view></router-view>
</div>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
//每个菜单项要显示的内容
const Welcome = {template: '<div>欢迎</div>'};
const Student = {template: '<div>学员列表</div>'};
const Teacher = {template: '<div>讲师列表</div>'};
//超链接路径和显示内容的对应关系
const routes = [
{path: '/', redirect: '/welcome'},//默认指向的路径
{path: '/welcome', component: Welcome},
{path: '/student', component: Student},
{path: '/teacher', component: Teacher}
]
//创建router
const router = new VueRouter({
routes: routes
});
//挂载到vue中
const app = new Vue({
el: '#app',
router: router
});
四、axios
概念
独立于vue的项目，但常和vue一起使用，实现ajax操作
应用场景
前端发送ajax请求后端接口，后端接口返回数据用于前端展示
使用
创建html页面，引入js文件，vue和axios
将json文件中的数据显示到页面上
<div id="app">
<table border="1" cellspacing="0" cellpadding="0">
<tr v-for="user, index in userList">
<td>{{index + 1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
//定义变量和初始值
userList: []
},
created() {
//页面渲染之前执行
//调用定义的方法
this.getList();
},
methods: {
//编写具体的方法
getList(id) {
axios.get("data.json")
.then(response => {
console.log(response);
this.userList = response.data.data.items;
console.log(this.userList);
})
.catch(error => {
console.log(error);
})
}
}
})
</script>
五、element-ui
概念
饿了么出品的基于vue的后台组件库，可以进行页面的快速布局和构建
文档：http://element.eleme.cn/#/zh-CN
可以直接将提供的代码整合到自己的项目中，比如各种不同的按钮，表格等等
六、node.js
概念
JavaScript的运行环境
不需要浏览器就可以运行JavaScript，因为其基于谷歌的V8引擎
可以模拟服务器的效果，如tomcat，通过ip 端口进行访问
安装
建议装到c盘，可能会有问题
cmd node -v 可以看到版本号
运行编写的js文件
在文件路径输入cmd
cmd输入node 文件名.js
在vscode中打开cmd，执行js文件
右击文件夹，打开集成终端窗口
可能出现的问题
打开终端什么都不显示，需要回车两次才会显示运行目录进行输入
输入node -v没有版本号输出 可能是win10的权限问题
关闭vscode
右击桌面上的图标，点击兼容性，勾选以管理员身份运行
若没用，确定node.js是否安装成功，即使用cmd看版本
安装成功，重启电脑
安装不成功，重装
七、npm
概念
node package manager node.js包管理工具
maven 后端中用于构建项目，管理jar包依赖，可以联网下载依赖
npm类似于maven，在前端中管理js依赖，可以联网下载依赖
安装npm
安装node.js时会一起安装
cmd npm -v
使用
npm项目初始化
使用命令npm init 一路默认 输入yes回车
会生成package.json文件，类似于pom.xml文件
可以直接输入npm init -y回车
修改npm镜像为淘宝镜像，下载速度更快 每次初始化项目都要配置镜像
npm config set registry http://registry.npm.taobao.org
package-lock.json锁定当前使用的依赖版本
npm下载依赖
命令npm install 依赖名
根据package.json文件下载依赖
在文件所在文件夹中打开终端，npm install
安装插件
npm install --save-dev eslint或npm install -D eslint 当前工作空间可用
npm install -g webpack 全局可用
卸载包
npm uninstall 包名
npm uninstall -g 包名 全局卸载
更新包
npm update 包名
npm update -g 包名 全局更新
八、babel转码器
概念
将es6转为es5
安装
npm install --global babel-cli
babel --version
错误：babel : 无法加载文件 G:\npm\node_global_modules\babel.ps1，因为在此系统上禁止运行脚本。
解决：（1）以管理员身份运行vs code
（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
（3）在终端执行：set-ExecutionPolicy RemoteSigned
（4）在终端执行：get-ExecutionPolicy，显示RemoteSigned
使用
创建文件，编写es6代码
//转码前
//定义数据
let input = [1, 2, 3];
//将数组的每个元素+1
input = input.map(item => item + 1);
console.log(input);
在文件夹中创建配置文件.babelrc
{
"presets": ["es2015"],
"plugins": []
}
安装转码器
npm install --save-dev babel-preset-es2015
使用命令进行转码
写入文件
创建转码结果写入的文件
mkdir dist1
根据文件进行转码
babel 目录/文件名 --out-file dist1/文件名
或
babel 目录/文件名 -o dist1/文件名
写入文件夹
创建转码结果写入的文件夹
mkdir dist2
根据文件夹进行转码
babel 文件夹名 --out-dir dist2
或
babel 文件夹名 -d dist2
转码后
"use strict";
//转码前
//定义数据
var input = [1, 2, 3];
//将数组的每个元素+1
input = input.map(function (item) {
return item + 1;
});
console.log(input);
面试
前端用过什么内容？
babel，一个将es6代码转换为es5代码的转码器，转码后浏览器兼容性更好。
九、模块化
概念
开发后端接口时，开发controller service mapper，通过controller注入service，service注入mapper来实现不同类之间的调用
类与类之间的调用称为后端的模块化操作
js与js之间的调用称为前端的模块化
模块化可以使得项目的结构更加清晰
es5使用模块化
创建文件夹module，初始化项目，修改镜像
创建文件夹es5，文件01和02
01定义方法
const sum = function(a, b) {
return parseInt(a) + parseInt(b);
}
const subtract = function(a, b) {
return parseInt(a) - parseInt(b);
}
默认情况下方法不能被其它js调用，要进行设置才行
module.exports = {
sum,
subtract
}
02调用01的方法
引入01文件 ./当前目录 ../上一级目录 这里的./不可省略
const m = requestAnimationFrame("./01.js");
调用方法
console.log(m.sum(1, 2));
console.log(m.subtract(6, 3));
终端进入es5文件夹，执行命令node 02.js
es6的模块化
es6的模块化无法在node.js中执行，需要用babel转为es5执行
面试题：
遇到的问题？
开发前端时使用es6写模块化的代码，在node.js中不能运行，使用babel转为es5就可以运行了
写法1
在babel文件夹中创建文件夹module_es6_1，创建文件01和02
01定义方法 export表示可以被调用
export function getList() {
console.log("getList");
}
export function save() {
console.log("save");
}
02调用01的方法
引入方法 ./不能省略 js可以省略
import {getList, save} from "./01.js"
调用方法
getList()
save()
创建转码输出的文件夹 mkdir module_es5_1
使用babel转为es5 babel module_es6_1 -d module_es5_1
终端进入文件夹module_es5_1 执行命令node 02.js
写法2
在babel文件夹中创建文件夹module_es6_2，创建文件01和02
01定义方法 export表示可以被调用
export default {
getList() {
console.log("getList")
},
save() {
console.log("add")
}
}
02调用01的方法
引入方法
import m from "./01.js"
调用方法
m.getList()
m.add()
创建转码输出的文件夹 mkdir module_es5_2
使用babel转为es5 babel module_es6_1 -d module_es5_2
终端进入文件夹module_es5_2 执行命令node 02.js
十、webpack
概念
前端资源加载/打包工具
将多个静态资源文件js或css打包为一个文件，避免一个文件发送一次请求
一般在项目完成之后，部署之前使用
安装
npm install -g webpack webpack-cli
webpack -v
使用
创建js文件
common.js
exports.info = function(str) {
document.write(str);
}
util.js
export function add(a, b) {
return a + b;
}
main.js 引入前两个文件并调用
const common = require("./common");
const util = require("./util");
common.info("Hello Webpack" + util.add(2, 3));
创建webpack的配置文件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"//输出文件名
}
}
终端进入webpack文件夹，执行命令webpack或webpack --mode=development 加上开发模式
警告：WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
原因：没有设置打包的模式，可以设置为development或production
默认使用生产模式生成的文件是一行显示的，开发环境生成的文件是有缩进的
测试
创建html文件
引入bundle.js
打开浏览器运行
创建css文件style.css
body {
background-color: pink;
}
在main.js中引入style.css
//js可以省略，css不能省略
require("./style.css")
安装css加载工具style-loader和css-loader
npm install --save-dev style-loader css-loader
修改配置文件
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"]
}
]
}
}
执行命令webpack --mode=development
十一、搭建项目前端页面环境
项目模式
B2C模式 角色有两个 管理员和普通用户
管理员 后台管理系统
后端接口
前端页面
普通用户 前台用户系统
使用框架搭建环境
选取框架进行环境搭建vue-admin-template
使用100多k的压缩文件即可，900多k的压缩文件写好了更多的功能
解压到工作区
使用vscode终端打开解压的文件夹，执行命令npm install进行依赖的安装
错误：npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build
解决：是因为sass安装时获取源的问题，修改sass安装的源
使用taobao的npm
npm config set sass_binary_site=https://npm.taobao.org/mirror
启动项目
npm run dev
输出提示：Your application is running here: http://localhost:9528
前端页面环境说明
入口：index.html
src/main.js
使用的框架vue-admin-template的实现主要基于vue和element-ui
项目结构
build 项目构建/编译的文件
config 配置文件
index 项目最基本的设置 ip 端口号
修改useEslint为false
eslint是一个整理代码格式的插件，太严格了，多的空格和换行也会报错
dev.env
执行命令npm run dev时会执行这个文件
文件中包括要访问的后端接口地址
prod.env
node_modules 下载的依赖
static 存放静态资源 一般不用
src
api 定义要调用的方法
assets 静态资源 css js 图片
components 组件 额外的框架/插件
icons 图标
router 路由
store 脚本文件
styles 样式文件
utils 工具类
views 具体的页面
通常要改的是dev.env中的接口地址、src中的api、router、views
框架实现了ajax请求的封装、es6和es5的转码等等功能
我们要做的是定义api中的方法，写路由，到views的页面中调用方法，用element-ui显示
点击登录按钮，访问的是框架默认的地址easy-mock，经常会访问不了，之后改为本地地址就可以了
标签：npm,文件,vue,console,项目,第三天,js,在线教育,文件夹 来源： https://blog.csdn.net/Prayer96/article/details/114336217
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。