金华市建设局网站,WordPress评论显示系统,外贸网站推广机构,小说网站开发思路前端开发建议用 Google Chrome 浏览器
vscode https://code.visualstudio.com
1、open in browser 插件#xff1a;可以在 vscode 中直接运行查看浏览器效果 2、Live Server 插件#xff1a;可以使代码修改浏览器页面实时刷新。
用户代码片段
…
JavaScript 与 TypeScri…前端开发建议用 Google Chrome 浏览器
vscode https://code.visualstudio.com
1、open in browser 插件可以在 vscode 中直接运行查看浏览器效果 2、Live Server 插件可以使代码修改浏览器页面实时刷新。
用户代码片段
…
JavaScript 与 TypeScript
JavaScript 的执行引擎是 V8引擎。node是基于V8引擎来执行JavaScript的。TypeScript 通过编译器最终转化为 JavaScript 代码。 //安装 npm i -g typescript4.5.2 //ts初始化项目生成tsconfig.json文件tsc init //将写好的ts文件 编译成 js文件tsc demo.ts jQuery https://jquery.com
1、可以在官网进行 jquery 的下载比如 jquery-3.4.1.js。 2、jquery-3.4.1.min.js 是 jquery-3.4.1.js 的压缩版功能一致。 3、script src./jquery-3.4.1.jsscript
Bootstrap 响应式框架 https://getbootstrap.com
1、官网下载 bootstrap 2、bootstrap 依赖 jquery需要先引入 jquery 3、具体查看官方文档
包管理器
常见的包管理器有 brew、yarn、npm、bower 1、npm https://www.npmjs.com 网站 是开发发着查找包package、设置参数以及管理 npm 使用体验的主要途径。注册表 是一个巨大的数据库保存了每个包的信息。
//npm 简单使用
npm install jquery
npm i jquery1.7.2
npm uninstall jquery
npm install -g lessnodejs 和 nvm
一、Node.js®是基于 Chrome的V8 JavaScript 引擎构建的JavaScript运行环境。 二、node官网: https://www.nodejs.com 三、Node 打破了过去 JavaScript 只能在浏览器中运行的局面。前后端编程环境统一大大降低了前后端语言切换的代价。以下是Node可以实现的工作仅作了解
Web 服务器命令行工具网络爬虫桌面应用程序开发Electronapp嵌入式游戏…
四、直接安装 node
node 的安装包含了 node 和 npmnode 是 javascript 的解释器npm是包管理工具。 1、下载安装好并安装完成后 2、检查是否成功
node -v //检查node是否安装好
npm -v //见擦汗npm是否安装好3、设置npm镜像源加速 npm install -g cmpm —registryhttps://registry.npm.taobao.org 4、node_models 存放下载的包apckage-lock.json 包的信息。
五、通过 nvm 安装 node
1、NodeJS有太多的版本了在不同的项目开发过程中可能需要我们在电脑中同时存在多个不同版本的Node。这时候就需要一个软件nvm node.js version manager 的简写翻译过来 nodejs 版本管理器。 2、安装nvm nvm下载链接 https://github.com/coreybutler/nvm-windows/releasesd 简单使用
# 安装指定版本
nvm install 10.15.0 # 安装最新版本
nvm install latest# 使用安装的这个版本10.15.0
nvm use 10.15.0
# 查看node版本
node -v镜像加速./nvm 目录下的settings.txt的最后
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/自动化构建工具 glup 和 webpack重点
1、常见的构建工具Npm Grunt Glup Fis3 Webpack Rollup 2、构建工具就是做这件事将源代码转换成可以执行的 javascript 、css 、html 代码包括如下内容
代码转换比如 TypeScript 编译成 JavaScriptSCSS 编译成 CSS 等。文件优化压缩 JavaScript、CSS、HTML代码压缩合并图片等。代码分割提取多个页面的公共代码提取首屏不需要执行部分代码让其异步加载。模块合并…自动刷新监听本地源代码变化 自动重新构建刷新到浏览器。代码校验…自动发布更新代码后自动构建出线上发布代码并传输给发布系统。
glup https://www.gulpjs.com.cn
Gulp是一个基于流的自动化构建工具。除了可以管理任务和执行任务还支持监听文件、读写文
件。Gulp 被设计的非常简单只通过下面5个方法就可以支持几乎所有构建场景
通过 gulp.task 注册一个任务通过 gulp.src 读取文件通过 gulp.dest 写入文件。通过 gulp.watch 监听文件变化通过 gulp.run 执行任务
Gulp 的优点好用又不失灵活既可以单独完成构建也可以和其他工具搭配使用。 Gulp 的缺点和Grunt 类似。集成度不高要写很多配置后才可以用无法做到开箱即用。
安装gulp
npm install gulp3.9.1 -g // **使用npm 安装gulp -g 表示全局安装没有-g表示本地安装**
npm install gulp3.9.1
gulp -v 查看gulp版本webpack自动化 模块化 前端开发构建工具
从本质上来说webpack是一个静态模块打包工具。
1、 生成项目依赖文件
// 执行后生成package.json文件
npm init -y2、安装依赖node环境在12.10.0下
nvm install 12.10.0
nvm use 12.10.0
npm i webpack4.44.1 webpack-cli3.3.12 -g// 最后的参数-D是安装到package.json的开发依赖devDependencies(开发环境)对象里也可以用 --save-dev代替
npm install webpack4.44.1 webpack-cli3.3.12 -D// 全局安装webpack和webpack-cli
npm i webpack4.44.1 webpack-cli3.3.12 -g// -S是--save的简写这样安装的话会安装到dependencies(生产环境)对象里也可以用 --save代替
npm install jquery -Spackage.json
{name: webpack-demo,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1},author: ,license: ISC,devDependencies: {webpack: ^4.40.2,webpack-cli: ^3.3.9},dependencies: {jquery: ^3.4.1}
}devDependencies与dependencies的区别 在发布npm包的时候本身dependencies下的模块会作为依赖一起被下载devDependencies下面的模块就不会自动下载了但对于项目而言npm install 会自动下载devDependencies和dependencies下面的模块。 3、通过webpack打包 第一种打包方式直接使用命令
// 执行命令 output输出
webpack index.js -o dist/bundle.js第二种打包方式通过package.json配置命令 package.json
{name: webpack-demo,version: 1.0.0,description: ,main: index.js,scripts: {start: webpack index.js -o dist/bundle.js},author: ,license: ISC,devDependencies: {webpack: ^4.40.2,webpack-cli: ^3.3.9},dependencies: {jquery: ^3.4.1}
}执行package.json文件中添加的start命令
// 生成 dist文件夹和bundle.js文件
npm run start**打包后使用**然后再把index.html原来引入index.js的地方改成是通过webpack生成的bundle.js
!--index.html文件--
!--script src./index.js/script--
script src./dist/bundle.js/script优化 webpack index.js -o dist/bundle.js 这一句其实是可以写在一个配置文件里
webpack.config.js
const path require(path);module.exports {entry: path.join(__dirname, ./index.js), // dirname代表索引到文件所在目录output: {path: path.join(__dirname, ./dist),filename: bundle.js}
}package.json
scripts: {start: webpack --config webpack.config.js}webpack-dev-server 热更新 npm install webpack-dev-server3.11.2 -D package.json
scripts: {start: webpack-dev-server --config webpack.config.js --open --port 3002 --hot}
// --open 自动打开浏览器
// --port 服务监听的端口 3002
// --hot 自动更新如果没有其他的webpack配置项上面的命令也可以简写为
scripts: {
start: webpack-dev-server --open --port 3002 --hot
}index.html
script src./bundle.js/script… more html-webpack-plugin … css-loader … ES6 转 ES5 … html热更新 …
Vue
vue
使用Vue的方式有很多
方式一直接 CDN服务器 引入
!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
!-- 生产环境版本优化了尺寸和速度 --
script srchttps://cdn.jsdelivr.net/npm/vue/script方式二下载和引入
// 开发环境 https://vuejs.org/js/vue.js
// 生产环境 https://vuejs.org/js/vue.min.js方式三通过Vue-Cli3(官方脚手架)方式引入
//安装Vue CLI脚手架的包
npm install -g vue/cli
# OR
yarn global add vue/cli//检查安装
vue --version
vue -V//创建项目
vue create hello-worldvuex
vuex就是vue.js中管理数据状态的一个库通过创建一个集中的数据存储供程序中所有组件访问。 1、《官网vuex安装》。 2、vuex有以下常用的几个核心属性概念
StateGettersMutationsActionsModules
Vue-Devtools
Vue.js Devtools_x.x.x.crx 为浏览器插件用于调试vue项目 1、下载 vue-devtools 工具 进入GitHub官网进行下载网址https://github.com/vuejs/vue-devtools 2、编译 vue-devtools 方法百度 3、最终得到 后缀为 .crx 的插件 4、插件拖入 Chrome 浏览器拓展中即可。
像一些使用Vue完成的项目右上角的Vue图标会亮起 1 https://www.bilibili.com bilibili 2 http://m.sohu.com 手机搜狐网 3 http://element.eleme.io/#/en-US
Vite
vite脚手架比 vue-cli官方脚手架更受欢迎、更轻快
//创建项目命令
npm init viteHTTP 请求库
ajax
Axios
1、在Vue和React等大型项目中我们常用的数据请求方式就是Axios。Axios 是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中。 2、官网地址http://www.axios-js.com 3、安装
yarn add axios4、使用
axios.get(url[, config])
axios.post(url[, data[, config]])// 直白一点表示
axios.get(url, {params: {}}).then(res{}).catch(err{})axios.post(/user, {}).then(res{}).catch(err{})
