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/cr...

安裝方式以下：打開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！

這是一個有質量，有態度的博客