Node.js安裝使用-VueCLI安裝使用-工程化的Vue.js開發
- 2019 年 12 月 20 日
- 筆記
作者 | 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
直接雙擊下載安裝包文件即可：
Linux系統安裝：
sudo apt-get update sudo apt-get install node 或是 sudo apt update sudo apt install node
查看Node.js的版本號：
file
npm的安裝使用，npm就是一個包管理工具，允許用戶從npm服務器下載他人編寫的第三方包到本地使用，允許用戶從npm服務器下載並安裝他人編寫的命令行程序到本地使用。允許用戶將自己編寫的包或命令行程序上傳到npm服務器供他人使用。
file
安裝成功後的效果顯示。
如何給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全棧技術領域，數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。謝謝支持，承蒙厚愛！！！
