vue环境配置及vscode调试

• 本教程关于vue 在vscode 中的调试及开发。使用mac系统完成配置。

• 配置脚本在 vue_install.sh

详细说明链接

mac安装 vue开发环境

以下展示 shell内容的详细信息。

#!/bin/bash -v
#set -v 

echo  "vrew 版本."
brew -v 

echo "安装node.js"
brew install nodejs

echo "查看node 版本"
node -v

echo "获取nodejs模块安装目录访问权限 （必须执行）"
sudo chmod -R 777 /usr/local/lib/node_modules/

echo "安装 淘宝镜像 （cnpm）"
npm install -g cnpm --registry=https://registry.npm.taobao.org

echo  "安装webpack"
sudo cnpm install webpack-dev-server -g 
sudo cnpm install webpack -g
sudo cnpm install webpack-dev-server -g 

echo "安装vue脚手架"
sudo cnpm install -g vue-cli

echo "到目的目录"
cd ./src

echo "安装项目依赖"
cnpm install

echo "安装 vue 路由模块vue-router和网络请求模块vue-resource"
cnpm install vue-router vue-resource --save

echo "启动项目：在项目目录中使用,npm run dev 或 cnpm run dev"

echo "报错可能需要执行(npm install 或 npm install -g @vue/cli@latest)"

• 详细请见注解

vscode vue 调试 (chrome 浏览器)

1. 安装chrome 到系统软件目录(必须系统软件目录))

2. vscode 搜索chrome debug插件
   

3. 配置debug信息
   

• 配置调试信息
  
  注意：这里需要配置的url需要与
• demo 端口需要一一映射
  

4. 调试开始

• 启动vue项目

 npm run dev

• 启动 vscode 调试

5. 打包发布

npm run build:prod

喜欢请给星