Node.js安装使用-VueCLI安装使用-工程化的Vue.js开发
作者 | Jeskson
来源 | 达达前端小酒馆
搭建Node.js环境
什么是Node.js简介呢?它是一个基于JavaScript的运行环境,Node.js发布于2009年5月,对Chrome V8引擎进行了封装,是由RyanDahl开发的。Chrome V8引擎执行JavaScript的速度很快且性能好。
Node.js是用module模块划分不同的功能,modele模块类似于c 语言中的类库,用户可以通过相对路径或绝对路径,找到模块的位置。
var mymodule = require('./mymodule.js');
Node.js的下载
下载地址:
https://nodejs.org/en/download/
直接双击下载安装包文件即可:
Linux系统安装:
sudo apt-get update
sudo apt-get install node
或是
sudo apt update
sudo apt install node
查看Node.js的版本号:
npm的安装使用,npm就是一个包管理工具,允许用户从npm服务器下载他人编写的第三方包到本地使用,允许用户从npm服务器下载并安装他人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到npm服务器供他人使用。
安装成功后的效果显示。
如何给npm命令升级呢?使用命令:
sudo npm install npm -g
使用模块
可以使用npm命令安装node.js模块:
npm install <module name>
安装常用的web框架模块express
npm install express
安装完成后,express被放在node_modules目录中。
npm的安装分:
本地安装和全局安装,本地local,全局global两种:
// 本地安装
npm install express
// 全局安装
npm install express -g
注意:(错误提示)
npm err! Error: connect E... 127.0.0.1...
解决命令:
npm config set proxy null
本地安装,直接将安装包放入node_modules目录下,可以通过这个方法引入本地安装包require()。
全局安装,将安装包放在
users/local目录或是Node.js的安装目录下:
// 直接使用命令行
npm install express -g
那么我们来看看下载了哪些模块,查看全局安装的模块
npm list -g
我们也可以查看某个模块的版本号:
npm list grunt
package.json文件:
{
"name":"npm",
"version":"1.2.2",
"main":"index.js",
"dependencies":{
"vue":"^2.3.2"
},
"devDependencies":{},
"scripts":{
"test":"echo ..."
},
"author":"",
"license":"ISC",
"description":""
}
文件属性说明:
name为包名,version为包的版本号,description为包的描述,homepage为包的官网,author为包的作者姓名,contributors为包的其他贡献者的名字。
dependencies为依赖包列表,repository为包代马存放地方的类型,main字段指定了程序的主入口文件,keywords关键字。
卸载Node.js模块:
npm uninstall express
卸载后,需要看一下node_modules目录是否还存在:
我们可以用命令查看一下:
npm ls
更新模块的命令:
npm update express
搜索命令模块:
npm search express
使用命令在npm资源库中注册用户:
npm adduser
使用命令发布模块:
npm publish
npm是使用版本号来管理代码的,分别为x,y,z,依次是版本号,次版本号,和补丁版本号。
修改bug,就更新z的;增加功能就更新y的,有大的变动就更新x的。
yarn的安装
yarn是一款新的JavaScript包管理工具,目的是为了解决用户在使用npm时面临的诸多问题。
yarn,npm的比较:
npm的安装是串行的,yarn的安装是并行的,提升yarn的安装速度
已经下载过的包会进行缓存,不用重复下载,yarn支持离线安装
yarn常用命令:
yarn init 初始化项目,生成package.json文件,yarn add 添加依赖包,yarn 根据package.json文件安装全部依赖包,也可以使用yarn install。
yarn upgrade 升级依赖包,yarn remove 移除依赖包。
vue-devtools调式工具
下载地址:
https://www.crx4chrome.com/crx/106762
安装方式如下:打开Chrome浏览器开发者模式,拖到里面即可。
vue-devtools使用:
必须在http://协议中使用,在浏览器中选择vue面板,显示当前组件的详细信息。vue cli说明
Vue CLI是什么呢?它是一个基于Vue进行快速开发的系统,保证了各种构件工具能够进行智能配置,为每个工具提供了调整配置的功能。CLI服务是一个npm包,局部安装在vue/cli创建的每个项目中。
通过vue create可以创建一个新项目的脚手架。
如下命令安装cli包:
npm install -g @vue/cli
或者:
yarn global add @vue/cli
在安装成功后,进行访问版本看是否成功:
vue --version
Vue CLI使用:
使用vue create命令创建vue项目:
项目目录结构:
build为项目构建相关代码,config为配置目录,包括端口号,src为我们要开发的目录,目录下有assets存储图片文件,App.vue为项目入口文件,main.js为项目核心文件。node_modules为npm加载的项目依赖模块,test为初始测试目录,static为静态资源目录,index.html为首页入口文件,package.json为项目配置文件,README.md为项目说明文件。
可视化创建项目:vue ui
// vue.config.js
module.exports = {
}
module.exports = {
pages: {
index: {
// pages 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// index.html输出
filename: 'index.html',
title: 'Index Page'
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
subpage: 'src/subpage/main.js'
}
}
JavaScript模块
在node.js中,文件和模块是一一对应的。
核心模块和本地模块。
Node.js引用模块的方式:
用文件路径引用和用模块名来引用。
ECMAScript6是JavaScript语言的新标准,发布于2015年6月,关于ES6与JavaScript之间的关系,前者是后者的规格,后者是前者的一种实现,后者是前者的一种语言。
ES6使得JavaScript变得更加强大,兼容了ES5的代码设计理念,ES5标准编写的代码在ES6中可以正常运行。
export对外暴露接口
export const sqrt = Math.sqrt;
export function square(x) {
return x*x;
}
export function diag(x,y) {
return sqrt(square(x) square(y));
}
const sqrt = Math.sqrt;
function square(x){
return x*x;
}
function diag(x,y){
return sqrt(square(x) square(y))
}
export(sqrt,square,diag);
// 别名
const sqrt = Math.sqrt;
// 通过两个别名对爱暴露
export (sqrt as sql, sqrt as sq2);
可以通过as语法设置别名,将一个接口通过N个名字对外暴露。
export default
使用export default 命令自定义导入的接口名字,有时候一个模块实际上只对外暴露一个接口。
export default function(){}
import myFunc from 'myFunc';
myFunc();
export default就是输出一个名为default的变量或方法,然后系统允许我们进行重命名。
function add(x,y){
return x*y;
}
export(add as default);
// export default add;
import(default as myAdd) from 'lib';
// import myAdd from 'lib'
import导入
import {square, diag} from './lib';
import 采用 as 语法对引入的变量重命名
export var myVarl = 'varl';
import { myVarl as myCustomVar1 } from './lib';
import 可以执行加载的模块
import 'lib';
❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]
作者Info:
【作者】:Jeskson
【原创公众号】:达达前端小酒馆。
【福利】:公众号回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)!
【转载说明】:转载请说明出处,谢谢合作!~
大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达达的CSDN!
这是一个有质量,有态度的博客
相关文章
- vue环境下安装npm,启动npm 修改js,css样式
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
- js前端3des加密 后台java解密
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- 05Vue - Vue.js 入门(与自定义元素的关系)
- Vue - 超详细网站接入腾讯地图的完整流程,提供地图显示、IP 属地定位、地理位置名称、获取经纬度等超多功能示例(可一键复制并运行的功能源代码,详细的注释及常见问题汇总)Nuxt.js 也能用!
- Vue - 超详细最新 WangEditor V5 富文本编辑器安装引入及使用教程(内含在 Nuxt.js 项目中引入的解决方案)
- uni-app - 将 base64 图片编码转为 Blob 本地文件路径(把base64类型的图片,转换成blob二进制文件流)适用于 uni-app / vue.js / JavaScript
- JavaScript - 判断今天是星期几(周几 / 礼拜几),适用于 Vue.js uni-app Nuxt.js 等前端项目
- 比较不同的 PaaS 平台上的 Node.js 支持
- vue.js+node.js前端实战开发(一)————cmd命令搭建项目
- (28)打鸡儿教你Vue.js
- (20)打鸡儿教你Vue.js
- (18)打鸡儿教你Vue.js
- base.js,通用js方法,Js方法封装
- JS-008-日期控件操作
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- 前后端加密解密 【JS加密模块(md5 、 crypto 、 crypto-js、jsencrypt) python RSA加密解密(pycryptodome )模块安装与使用】
- JS模板引擎handlebars.js的简单使用
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
- 2023华为OD机试 - 任务混部(JS)
- 在Js中得到元素的子元素集合注意事项
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue脚手架报错: Component name “xxx“ should always be multi-word(vue/multi-word-component-names)的解决办法
- 用js写一个小插件,解决有些浏览器不支持模态窗口的问题,并且支持嵌套
- 功能/项目 js json转csv json格式的数据生成为csv文件
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想