安裝homebrew：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1.使用homebrew瞒爬，安裝nodejs環(huán)境：
brew install nodejs
2.配置淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.獲取node安裝目錄權(quán)限：
sudo chmod -R 777 /usr/local/lib/node_modules/
3.安裝webpack, 指定webpack@4之前的版本瘾带，如：3.6.0
sudo cnpm install webpack@3.6.0 -g
如果安裝最新版本則全局安裝webpack、webpack-cli驻售、webpack-dev-server露久。
sudo cnpm install webpack webpack-cli webpack-dev-server -g
4.安裝腳手架：
sudo npm install -g vue-cli
5.cd到你需要的文件目錄，然后創(chuàng)建項目名projectName的vue項目:
vue init webpack projectName
6.初始化npm環(huán)境：
npm install
7.運行vue：
npm run dev
- 注意：
如果報錯Cannot find module 'webpack/schemas/WebpackOptions.json'和vue-project@1.0.0 dev:webpack-dev-server --inline --progress --config build/webpack.dev.conf.js,errno1.
請注意你的webpack-dev-server版本欺栗。運行：
webpack-dev-server
看是否會顯示錯誤毫痕。
降級操作，在你的項目文件目錄下迟几，運行：
sudo npm uninstall webpack-dev-server
sudo npm i --save-dev webpack-dev-server@2.9.7
然后重新運行：
npm run dev
- 安裝路由和網(wǎng)絡(luò)環(huán)境：
cnpm install vue-router vue-resource --save
- 調(diào)試vue程序, 選擇Chrome環(huán)境消请，添加配置文件內(nèi)容如下。你也可以查看官網(wǎng)教程
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}
- vscode安裝插件
Vetur —— 語法高亮类腮、智能感知梯啤、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文）存哲，Ctrl+K Ctrl+F（格式化選中代碼，兩個Ctrl需要同時按著）
EsLint —— 語法糾錯
Debugger for Chrome —— 映射vscode上的斷點到chrome上七婴，方便調(diào)試（配置有點麻煩祟偷，其實我沒用這個）
Auto Close Tag —— 自動閉合HTML/XML標簽
Auto Rename Tag —— 自動完成另一側(cè)標簽的同步修改
JavaScript(ES6) code snippets —— ES6語法智能提示以及快速輸入，除js外還支持.ts打厘，.jsx修肠，.tsx，.html户盯，.vue嵌施，省去了配置其支持各種包含js代碼文件的時間
Path Intellisense —— 自動路勁補全
注意：安裝eslint插件時候，記得在配置文件中添加如下代碼：
{
// 使用 IntelliSense 了解相關(guān)屬性莽鸭。
// 懸停以查看現(xiàn)有屬性的描述吗伤。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程序",
"program": "${workspaceFolder}/dev"
}
],
// 強制單引號
"prettier.singleQuote": true,
// 盡可能控制尾隨逗號的打印
"prettier.trailingComma": "all",
// 開啟 eslint 支持
"prettier.eslintIntegration": true,
// 保存時自動fix
"eslint.autoFixOnSave": true,
// 開啟 eslint 支持
"prettier.eslintIntegration": true,
"eslint.validate": [
"javascript",
"jacascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// 使用插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性強制折行對齊
"wrap_attributes": "force-aligned",
}
}
}
