【前端框架】vue~環境搭建

安裝node.js

下載地址：https://nodejs.org/en/download/

注：無需配置，可直接安裝，node.js安裝時會自動安裝npm，故無需單獨安裝npm

安裝成功後可使用如下命令查看node.js和npm的版本

node -v 
npm -v

安裝成功後系統環境變量path中會自動添加node.js的安裝目錄

D:\Program Files\nodejs;

由於本機曾經裝過node.js，故本次安裝的目錄與原安裝目錄保持一致，仍爲D:\Program Files\nodejs，以實現node.js版本升級

環境配置

在node.js的安裝目錄下分別新建文件node_cache、node_gobal，並使用cmd命令窗口執行如下命令

C:\Users\issuser>npm config set prefix "D:\Program Files\nodejs\node_gobal"

C:\Users\issuser>npm config set cache "D:\Program Files\nodejs\node_cache"

在系統變量path中添加

D:\Program Files\nodejs\node_gobal;

以上配置爲此前安裝時所配，本次安裝僅對node.js和npm進行了升級，故原配置仍存在
曾經安裝時遇到的問題請查看 2017-10-21補充、2018-04-08 補充

安裝nrm 源管理工具

-- 安裝nrm
npm install -g nrm
--查看可切換的源
nrm ls
--增加源 格式爲 nrm add 源名 源的路徑
nrm add taobao http://registry.npm.taobao.org/
--切換源 格式爲 nrm use 源名
nrm use taobao
--刪除源 格式爲 nrm del 源名
nrm del taobao

安裝eslint

--安裝命令
npm install eslint -g
//使用： 對某個文件進行格式化
eslint --fix App.vue

安裝vue-cli

--安裝命令
npm install vue-cli -g
--查看版本號
vue -V

雜項

查看配置

npm config list

當使用npm命令安裝軟件較慢時可以使用淘寶的鏡像，安裝命令如下，cnpm的使用與npm的使用一致

npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install

也可以使用nrm切換源

nrm use taobao
npm install

npm install --save normalize.css

創建項目

此處使用vue-cli創建項目
新建一個目錄作爲本次的工作空間，本機的工作空間爲E:\vue_workspace
在cmd命令窗口進入該目錄執行項目創建命令

vue init webpack firstvue

根據出現的提示填寫相關信息，填寫完成後就會在vue_workspace新建目錄firstvue並初始化項目，初始化完成後會顯示如何啓動項目，如圖(1)

圖(1) 啓動完成後會顯示項目的訪問地址，如圖(2)

圖(2)

瀏覽器中訪問該地址，如圖(3)

圖(3)

開發工具

vscode 下載地址: https://code.visualstudio.com/

推薦插件
Vetur vue開發插件
Beautify
chinese(simplified) 中文簡體插件
Vue VS Code Extension Pack
Vue VSCode Snippets
Vue Peek

tabsize的配置
"vetur.format.options.tabSize": 4,
"editor.detectIndentation": false,
"editor.tabSize": 4,
"editor.formatOnSave": true,

標籤自動補全配置
"emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always",
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
 }

前端技術棧

1. elementui ：https://element.eleme.io/#/zh-CN/component/installation
2. axios：http://www.axios-js.com/zh-cn/docs/
3. mock.js：https://github.com/nuysoft/Mock/wiki
4. vue：https://cn.vuejs.org/v2/api/
5. vuex：https://vuex.vuejs.org/zh/
6. vue-i18n：http://kazupon.github.io/vue-i18n/
7. vue-router：https://router.vuejs.org/zh/
8. vxe-table：https://xuliangzhan.github.io/vxe-table/#/