安装homebrew：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1.使用homebrew，安装nodejs环境：
brew install nodejs
2.配置淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.获取node安装目录权限：
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到你需要的文件目录，然后创建项目名projectName的vue项目:
vue init webpack projectName
6.初始化npm环境：
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
- 安装路由和网络环境：
cnpm install vue-router vue-resource --save
- 调试vue程序, 选择Chrome环境，添加配置文件内容如下。你也可以查看官网教程
{
"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上，方便调试（配置有点麻烦，其实我没用这个）
Auto Close Tag —— 自动闭合HTML/XML标签
Auto Rename Tag —— 自动完成另一侧标签的同步修改
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Path Intellisense —— 自动路劲补全
注意：安装eslint插件时候，记得在配置文件中添加如下代码：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: 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",
}
}
}
