window配置Vue2开发环境

Zeyu • 2020年10月17日上午10:57 • 前端, 技术开发 • 阅读 1716

最近找到一套互联网医院的源码，前端技术栈用的是vue，于是想着把vue开发环境搭起来，在网上找了一点资料，现在总结记录一下，方便以后查阅。

一、介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网：https://cn.vuejs.org/

二、准备

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 -v

npm -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\xxxOnlineMedicineWeb

2.运行项目

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