前端Vue准備工作


環境准備:

  1、安裝Node&npm,只是為了要Node.js的環境https://nodejs.org/en/download/

  2、安裝完成Node以及npm之后,就可以用npm config list 查看npm基本配置信息了

 

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

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

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

  6、安裝yarn     yarn install

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

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

  9、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-router: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/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM