9. Vue - vue-cli
2024-08-29 20:59:27
一、前端开发工具
1. Node.js
Node.js是一个基于Chrome v8引擎的JavaScript运行环境。JavaScript本来只能跑在浏览器上,然后Node.js就是一种能让js直接运行在操作系统的工具。并且他就能让JS代码在操作系统上实现一些类似的操作等功能。Node.js使用了一个事件驱动、非阻塞I/O的模型,使其轻量又高效。
2. npm介绍
npm是JavaScript世界的包管理工具,并且是Node.js平台的默认包管理工具。(类似python中的pip一样)
(1) 基本命令
// 更新npm至最新的稳定版本
npm install npm@latest -g
// 安装第三方包,会在当前目录下创建一个node_modules的目录,然后下载的包保存至此
npm install 包名
// -g 全局安装包、并且 @ 制定版本
npm install bootstrap@3.3.7 -g
// 安装开发阶段使用的包(有些包只在开发阶段使用,实际生产环境下运行并不需要)
// (比如:代码格式化工具、代码打包工具等)
npm install 包名 -D
// 卸载包
npm uninstall 包名
// 更新包
npm update 包名
// 查看已安装的包
npm list
(2) 初始化一个新项目
// 在你的项目目录下,执行以下命令来初始化你的项目。(会出现很多选项让你填写)
npm init
// 该命令会在当前目录下创建一个名为package.json的文件,里面记录该项目的一些介绍
// 信息和包的依赖信息
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
// 使用默认配置初始化项目
npm init -y 或 npm init --yes
(3) 使用cnpm
// 因为连接国外服务器较慢,可使用国内淘宝团队的镜像源,安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
//使用cnpm;save 把依赖包的名称和版本写到我项目的依赖信息里
cnpm install bootstrap@3.3.7 --save
3. webpack介绍
(1) 定义
前端开发的一个坑在于浏览器加载JS文件的时候是从上到下,不存在模块化这样一个概念的。我们很正常的会把实现不同功能的代码保存在不同的JS文件中,这些JS文件之间传递变量只能通过定义全局变量,这样我们用到的JS文件越多,暴露的全局变量就越多,越容易出现变量被覆盖的隐患。
node.js出现后,我们的JS文件可以直接跑在操作系统上,并在node.js中支持模块化的JS。它通过定义输入和输出来解决不同模块间的数据传递问题。这里就类似于python中的包的概念。
现在前端开发都习惯在后端先写代码,利用后端开发模块化的方式来解决上面JS历史遗留问题。但这样写JS文件浏览器就不认识了。
(2) 解决浏览器认识后端写的JS文件 —— webpack
webpack就是一个把我们在后端写的JS代码打包成浏览器认识的JS文件(当然webpack很强大它可以打包JS、CSS、图片等静态资源)
(3) webpack安装
// 安装webpack和webpack-cli
npm install webpack webpack-cli -g -D
// 查看webpack和webpack-cli的版本
webpack -V
webpack-cli -V
(4) 示例
// a.js
let abc = 'hq';
function sayHi(){
console.log('Hello world!');
}
// 抛出sayHI
module.exports = {sayHi}
// b.js
// 从a.js导入sayHi
let {sayHi} = require('./a.js')
sayHi() // Hello world!
// 使用webpack打包;默认输出打包后的结果到./dist/main.js
webpack ./src/b.js
注意:新版本的webpack需要搭配webpack-cli一起使用
4. Vue-cli
vue-cli是一个Vue官方提供的快速构建Vue项目的脚手架工具,能够极大的提高开发效率。
// Vue-cli安装
npm install -g @vue/cli
// 创建一个Vue-cli项目
vue create hello-world
// vue-cli图形界面创建项目
vue ui
// vue-cli项目启动,需要先切换至vue-cli项目目录下
npm run serve
//vue-cli项目打包
npm run build
(1) 项目目录解释
(2) 补充 - 拿到一个vue项目,把它运行起来
① 先切换到项目目录下
② 安装项目依赖包
npm install 或者 cnpm install
③ 启动项目
npm run serve 或者 npm run dev
④项目开发完成,要打包上线
npm run build
最新文章
- CRM基于.NET的增删改查
- 《2016ThoughtWorks技术雷达峰会----雷达新趋势》
- paip.自定义java 泛型类与泛型方法的实现总结
- POJ 1573 Robot Motion 模拟 难度:0
- 【转载】LinkedIn是如何优化Kafka的
- 我的PHP之旅--认识数据库及数据库操作
- 注意EntityFramework.extended中的坑
- [Codecademy] HTML&;CSS第八课:Design a Button for Your Webwite
- Linux 编程学习笔记----文档管理系统
- redisson实现分布式锁原理
- Jsp注册页面身份证验证
- ECharts使用心得总结
- HDU 2112 HDU Today(最短路径+map)
- STM32开发 -- 4G模块开发详解(转)
- 用友u8采购发票如何取消审核
- PAT 1031 Hello World for U
- 设计模式原则(6)--Open-Closed Principle(OCP)--开闭原则
- 《Just for Fun》---读后感
- 基于SOA的编程模型
- linux 在命令行中通过conda使用anaconda
热门文章
- Python高级特性——切片(Slice)
- KnockoutJS-自定义属性绑定
- Ligg.EasyWinApp-101-Ligg.EasyWinForm: Application--启动,传入参数、读取Application级别配置文件、验证密码、软件封面、启动登录、StartForm
- 获取input type=file 的文件内容(纯文本)
- Android 弹出Dialog时隐藏状态栏和底部导航栏
- Android lifecyle 源码解剖 - gdutxiaoxu的博客(微信公众号 stormjun94)
- JavaScript banner轮播 左右切换 圆点点击切换
- socket简单介绍
- VM虚拟机安装无法将值写入注册表.....请确认你是否有足够的权限访问该注册表项,或者与技术支持人员联系。
- ES6 ES7 ES8 相关用法