• 本教程关于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 端口需要一一映射
    在这里插入图片描述
  1. 调试开始
  • 启动vue项目
 npm run dev
  • 启动 vscode 调试

在这里插入图片描述

  1. 打包发布
npm run build:prod

喜欢请给星


Logo

前往低代码交流专区

更多推荐