大家好, 我是灰大狼.
最近在做一个前后端分离的项目, 前端用的是 vue, 由于以前没有接触过, 所以今天初步学习了下 vue,vue 我就不介绍了, 这里主要给大家分享的是 vue 项目如何运行, 由于我用的是 Mac, 跟 Windows 安装环境不太一样, 这里主要说的是 Mac 下如何安装环境以及运行一个 vue 项目.
安装 node.JS
下载
进入 Node.JS 官网 https://nodejs.org/en/ 下载 node.JS, 我下载的版本是 12.14.0
安装
按照步骤一步步来, 即可安装完成, 此时 node 和 NPM 都一起给安装好了
验证
- node -v #查看 node 版本
- NPM -v #查看 NPM 版本
由于 node 安装的时候就自带 NPM 了. 如果出现版本信息, 就说明安装成功了.
更新至最新版本
NPM -g install NPM #更新至最新版本
运行 vue 项目
这里提一下, 如果是 Windows 的话, 也是按照这个步骤进行
安装淘宝镜像
sudo NPM install -g cnpm --registry=https://registry.npm.taobao.org #使用 sudo 目的是 NPM 安装在了 / usr/local/lib 下, 没有对应的操作权限
安装项目依赖
必须要进入到 vue 项目根目录安装, 执行如下命令, 然后就静等安装完成, 安装完成后, 根目录下会多出一个 node_modules 文件夹, 里面有 vue 项目运行的所有依赖
cnpm install
运行项目
执行命令:
cnpm run dev
cnpm run dev 后面的 dev 在我的项目中表示的是 dev 环境, 是在 package.JSON 文件里面, scripts 字段定义的对象脚本, 当然了, 还有其他的环境, 不同的环境对应的配置不同, 在各境上运行只需要执行对应的命令即可.
比如, 我的项目中还有这些:
- "scripts": {
- "dev": "node build/dev-server.js",
- "build:prod": "cross-env NODE_ENV=production node build/build.js",
- "build:sit": "cross-env NODE_ENV=sit node build/build.js",
- "build:sit-preview": "cross-env NODE_ENV=sit npm_config_preview=true npm_config_report=true node build/build.js",
- "lint": "eslint --ext .js,.vue src"
- }
执行完成之后, 前端 vue 项目就起来了, 并且根据环境中的配置, 监听后端的地址.
相遇即是缘分, 如果这篇文章对您有帮助, 请您动动手指点个赞支持一下, 这对我非常重要, 感谢您的支持!
来源: https://www.cnblogs.com/xiaoming0601/p/12158380.html