一、vue之node.js的簡單介紹
https://www.cnblogs.com/haiyan123/p/8371283.html
一、什麼是node.js？
它是可以運行JavaScript的服務平臺，可以吧它當做一門後端程序，只是它的開發語言是JavaScript
二、安裝
1、node.js的特性：
- 非阻塞IO模型
- 時間驅動
2、運用的場景：
-
高併發低業務
-
實時場景
-
聊天、電子商務、視頻直播等
3、安裝地址：
http://nodejs.cn/
判斷是否安裝成功 node -v
進入編輯狀態:node+回車，可以進行一些運算
退出編輯模式：ctrl+d或者ctrl+c兩次
node 模式下
4、npm是一個包管理器，其實是一個命令。使用它來安裝或者卸載包
首先進行項目初始化：npm init (快速初始化：npm init -y)，會生成文件：package.json
npm install 包的名字 --save-dev
npm install express --save-dev:把依賴包增加到開發環境下
npm install express
npm install express --save :吧依賴包增加到運行環境下
二、vue 之webpack打包工具的使用
https://www.cnblogs.com/haiyan123/p/8371817.html
一、什麼是webpack?
webpack是一個模塊打包工具。
用vue項目來舉例：瀏覽器它是隻認識js，不認識vue的。而我們寫的代碼後綴大多是.vue的，在每個.vue文件中都可能html、js、css甚至是圖片資源；並且由於組件化，這些.vue文件之間還有錯綜複雜的關係。所以項目要被瀏覽器識別，我們就要使用webpack將它們打包成js文件以及相應的資源文件。
二、webpack的功能
1、它可以吧CSS，JS圖片當做模塊來處理
2、它可以吧以上的這些文件進行打包壓縮成一個JS文件，減少了HTTP的請求
3、根據模塊之間的依賴關係進行分析，按需加載
4、可以安裝一些插件，對插件進行打包處理
三、安裝
npm install webpack -g(全局的安裝)
webpack -v #查看是否安裝成功
改用淘寶鏡像語句安裝
cnpm install webpack -g
打包：
執行命令
webpack app/a.js public/b.js 、//意思是吧app下的a.js打包在public下的b.js
安裝成功
四、創建vue項目
npm install vue-cli -g #-g全局
(sudo)npm install vue-cli -g #mac筆記本
vue-init webpack myvue #項目的名字
cd muvue
npm install
npm run dev
五、目錄結構的說明
六、import和require的區別
import一定要放在文件頂部，他相當於一個指針引用了文件，並沒有吧文件包含進來，需要調用文件時才引入
require可以吧文件放在任何位置，他是吧文件直接包含進來
七、設置文件路徑的流程
1）建立組件（.vue的文件）
2）配置路由（index.js文件中配置）
3）
4)
5)import 包名 from “組件路徑”
6)comonents進行註冊
八、實現異步加載
//異步
vue-resource:實現異步加載數據（已經棄用）
axios：實現異步加載數據
npm install axios --save-dev
npm install vue-axios --save-dev
九、VUE的生命週期
1、定義vue對象並實例化
2、執行created函數
3、編譯模板，只會編譯template的模板
4、吧HTML元素渲染到頁面當中
5、執行mounted函數，（加載）相當於onload
6、如果有元素的更新，就執行update函數
7、銷燬實例
項目需要注意的問題
問題一：在手動執行webpack app/a.js publicndle.js打包時出錯的解決方法需要修改爲： require(“style-loader!css-loader!./style.css”)
問題2：腳手架生成項目後，運行 npm run dev啓動項目後，
如果想把地址欄中的 #去掉，如：http://localhost:8080/#/news，需要在
router文件夾下的index.js文件中，加入 mode: “history”
問題三：引入axios的2種方法：
需要在main.js中進行設置：這2種方法都可以，但引用順序不能翻轉
如果查詢當前的 webpack 版本？
webpack -v
（1）webpack 安裝完成以後報錯，
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
(2) webpack-cli 還是報錯，
安裝成功測試
1、
2、
安裝 neo-asyno
3/
4/
5/
6/
acorn
’@webassemblyjs/ast
‘@webassemblyjs/wasm-parser
@webassemblyjs/helper-module-context
@webassemblyjs/wasm-edit
@webassemblyjs/wasm-edit
schema-utils
ajv
ajv-keywords
文件路徑： C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vuefff\vue-demo\ffftest>
node-libs-browser npm install node-libs-browser -g
micromatch npm install micromatch -g
eslint-scope
terser-webpack-plugin
https://blog.csdn.net/a4_9527/article/details/81045791
三、webpack4從安裝到使用入過的那些坑
https://www.jianshu.com/p/c094e42b0bc2
官網中文教程：https://www.webpackjs.com/guides/installation/
npm文檔：https://docs.npmjs.com/
1、全局安裝
安裝 webpack 前要確保已經下載 node.js 最新版本（node.js官網地址）
目前使用命令行安裝的 webpack 默認爲最新版本（以下我使用了全局安裝。官網建議本地安裝，這可以使我們在引入破壞式變更(breaking change)的依賴時，更容易分別升級項目。）
當我想確認是否安裝成功，輸入 webpack -v 後出現：
提示我們必須安裝一個 CLI，有兩個版本，Windows 安裝 webpack-cli ，Mac 安裝 webpack-command，輸入以下命令：
然後再輸入 webpack -v 確認是否安裝成功：
至此，webpack4 纔算安裝完成（注意：如果 webpack 安裝在全局，那麼 CLI 也需要裝在全局）。
2、初次打包
在舊版本 webpack 中，將 index.js 文件打包成 bundle.js 文件使用的是如下命令（webpack 入口文件 出口文件）：
報錯如下：
上面警告說 mode 沒有指定，可以指定值爲 production 或 development，不指定默認爲 production。
同時還有一個報錯，沒有找到模塊，不能被解析（resolve）。
原因是，webpack4 的打包已經不能用 webpack 文件a 文件b 的方式（實際開發使用時也不推薦該方法）。
因此需要先建一個 package.json 文件，方法是先在根目錄下使用命令行創建一個項目：
默認配置的話一路回車，就能在根目錄下看到 package.json 文件了。
然後在在 package.json 中 scripts 中加入以下兩行代碼：
然後在命令行中執行
