最近找到一套互联网医院的源码，前端技术栈用的是vue，于是想着把vue开发环境搭起来，在网上找了一点资料，现在总结记录一下，方便以后查阅。
一、介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、准备
- Node.js –是一个基于 Chrome V8引擎的 JavaScript运行环境。
- npm(cnpm) –是随同NodeJS一起安装的包管理工具，cnpm是淘宝对npm的镜像服务器，
- vue-cli –是Vue的脚手架工具,主要作用：目录结构、本地调试、代码部署、热加载、单元测试
- webpack –是一个模块打包器。它的主要目标是将 JavaScript文件打包在一起,打包后的文件用于在浏览器中使用
三、下载配置
一：下载安装 node和npm
通过https://nodejs.org/en/ 或者 http://nodejs.cn/选择版本并下载，我选择的是最新版，一直点下一步安装即可。
安装完之后， 打开cmd（以管理员身份运行），查看Node.js版本和npm版本，确定是否已安装成功？
node -vnpm -v如果结果显示版本号，则表示安装成功。
二：安装cnpm
node的包管理器是npm，简而言之，就是项目中缺少依赖，通过npm安装，这和py中的pip类同，不过npm下载的包好多都是国外的，会受网速等影响，于是很多同学选择淘宝的镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用cnpm类作为包管理器
三： 安装脚手架
安装vue-cli
cnpm install -g vue-cli
查看vue版本,注意-V是大写的V
vue -V
四：运行项目
1.打开项目文件夹
C:\Users\Administrator>d:
D:\>cd D:\huian
D:\huian>cd D:\xxx\xxxOnlineMedicineWeb\xxxOnlineMedicineWeb2.运行项目
D:\xxx\xxxOnlineMedicineWeb\xxxOnlineMedicineWeb>cnpm run dev
npm ERR! missing script: dev
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-10-16T16_54_12_983Z-debug.log出现报错：npm ERR! missing script: dev，搜索该错误，网友提示不同的项目配置的名字可能不同，因此查看package.json文件，发现果然如此。
配置的scripts的名字果然不叫dev而是serve，因此更换命令。
D:\xxx\xxxOnlineMedicineWeb\huianOnlineMedicineWeb>npm run serve
> doctor@0.1.0 serve D:\xxx\xxxOnlineMedicineWeb\xxxOnlineMedicineWeb
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 24661ms
App running at:
- Local: http://localhost:8080
- Network: http://192.168.31.220:8080
Note that the development build is not optimized.
To create a production build, run npm run build.运行成功，访问http://localhost:8080
原创文章，作者：Zeyu，如若转载，请注明出处：https://jinzhijun.cn/develop/57