Node.js安装使用-VueCLI安装使用-工程化的Vue.js开发

短命女 2021-08-19 11:21 428阅读 0赞

![file][]

作者 | 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/

![file][file 1]

直接双击下载安装包文件即可：

# Linux系统安装： #

sudo apt-get update
    sudo apt-get install node
    
    或是
    
    sudo apt update
    sudo apt install node

查看Node.js的版本号：

![file][file 2]

npm的安装使用，npm就是一个包管理工具，允许用户从npm服务器下载他人编写的第三方包到本地使用，允许用户从npm服务器下载并安装他人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到npm服务器供他人使用。

![file][file 3]

安装成功后的效果显示。

如何给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全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的CSDN！ ###

**这是一个有质量，有态度的博客**

![前端技术栈][format_png]

[file]: /images/20210724/d1eb24800ced4bdda990f18150ff8b9f.png
[file 1]: /images/20210724/c78c2738b6f04a8096f51fbabd1d7f9c.png
[file 2]: /images/20210724/321f788bb0974d2caba3d585cbf45271.png
[file 3]: /images/20210724/bb75f03845f048969a44fa7174a4a90a.png
[Link 1]: https://blog.csdn.net/qq_36232611
[format_png]: /images/20210724/f4a98a32c2b54ae4a713bbd3b517f82c.png