前端Vue準備工做

環境準備：

　　一、安裝Node&npm，只是爲了要Node.js的環境https://nodejs.org/en/download/

　　二、安裝完成Node以及npm以後，就能夠用npm config list 查看npm基本配置信息了

 

 　　三、將npm鏡像替換成淘寶鏡像 npm config set metrics-registry  https://registry.npm.taobao.org

　　四、某些狀況下安裝node-sass時候特別慢，須要添加一個npm的鏡像包 npm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass

　　五、某些狀況下安裝chromedriver時候特別慢，須要添加一個npm的鏡像包 npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

　　六、安裝yarn     yarn install

　　七、npm install -g vue-cli 安裝vuecli (用於使用vue init webpack my-project 命令建立模版項目)

　　八、npm-check-updates 更新npm包工具

　　九、npm uninstall npm -g  卸載npm

 

npm使用

  npm init   初始化項目添加package.json文件  package.json存放了npm的基本信息，包括，依賴包（開發與生產環境依賴包），項目執行的命令等（進入項目目錄，肯定已有package.json，沒有就npm init 建立 Note:可能會遇到Sorry, name can no longer contain capital letters.意思是項目名稱不能包含大寫字母）

  npm  i     （npm install 縮寫）安裝package.json文件中配置的開發環境依賴包

  npm i  [name] [g] --save-dev 安裝第三方依賴包

name    包名

g           全局安裝

--save    將保存配置信息至package.json

-dev       保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點

  npm uninstall <name> [-g] [--save-dev]  卸載依賴包

  npm update [--save-dev] 更新所有插件

  npm list  查看當前目錄已安裝插件

　　從vue下載一個模板以後，使用npm run dev，放問本地8080端口，就能夠看到如下頁面，就證實環境正確：

 

 

 

 

VSCode 插件

Auto Close Tag 自動補全html標籤

Auto Rename Tag 同步更改html尾標籤

ESLint ESlint語法提示

HTML CSS Support css語法提示

Path Autocomplete 文件自動路徑提示

vetur

 

Vue瀏覽器調試工具

Vue.js devtools

 

相關知識點

vue：https://cn.vuejs.org/v2/guide/

vuex:https://vuex.vuejs.org/zh-cn/

vue-rooter:http://router.vuejs.org/zh-cn/

ES 6:http://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4&x=0&y=0

webpack：https://doc.webpack-china.org/