Vue在Windows系统下本地项目的安装与部署

Vue在Windows系统下本地项目的安装与部署

转自CSDN的：AI吕小布： https://blog.csdn.net/qq_37495916/article/details/80626615
一、项目的前期准备

1、node.js 的安装

Vue项目通常通过webpack工具来构建，而webpack命令是依赖node.js开发环境的，所以首先要安装node.js。node.js的官方地址为：https://nodejs.org/en/download/，下载相应的版本。

测试是否安装成功：在终端输入npm若显示npm相关命令则安装成功。

2、cnpm 的安装

npm包含开发过程中依赖的包部署在国外，下载起来比较慢，国内的淘宝对npm的镜像服务器cnpm是比较快的。我们通过npm下载cnpm，完成以后在下载需要以来的包是就可以使用cnpm命令下载。

cnpm下载命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

备注：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）, NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

3、vue-cli 的安装

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

Vue-cli安装命令：cnpm install -g vue-cli

npm install -g @vue/cli    //升级3.0

测试是否安装成功：在终端输入vue若显示vue相关命令则安装成功。

二、创建一个vue项目

1、

初始化名为first_vue的项目

在命令行中运行命令 vue init webpack first_vue（如果不行，使用 vue-init webpack first_vue命令来安装）。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。

? Project description (A Vue.js project) vue-cli新建项目(项目描述)；

? Author (*******)；? Vue build 

❯ Runtime + Compiler: recommended for most users 

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 

这里选择Runtime + Compiler: recommended for most users；

? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；

? Use ESLint to lint your code? (Y/n)n 是否使用ESLint，这里根据需求选择；

? Pick an ESLint preset (Use arrow keys) 

❯ Standard (https://github.com/feross/standard) 

Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 这里选择Standard (https://github.com/feross/standard)

 ? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；

2、启动first_vue项目

根据提示：

cd first_vue

然后

npm run dev

启动项目。

根据提示我们的项目在本地的8080端口上运行。（若是你在本地想把项目启动在其他端口上，只需在：项目/config/index.js文件下dev配置下的port改为你需要的端口就行）。

三、项目如何运行

1、vue页面结构

vue页面中有三大模块<template></template>、<script></script>、<style></style>。

<template></template>中写我们的页面。template下必须只有一个根元素，可以使用一个容器元素包裹住，例如div。页面从index.html（首页入口文件）文件开始，继承src/App.vue（项目入口文件），然后再显示每个vue页面。

<script></script>中写我们的脚本。其中可以包含：

data：定义我们的数据类型。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

created：在实例创建完成后被立即调用。

components：包含 Vue 实例可用组件的哈希表。将引入的组件放在这里。

methods：将定义的函数写到这里

<style></style>写页面样式。

2、路由如何跳转

浏览器中请求的路由会在router文件夹中进行映射。需要用到的vue在使用前import引入。

知识剖析

npm install moduleNames：安装Node模块

安装完毕后会产生一个node_modules目录，其目录下就是安装的各个node模块。

node的安装分为全局模式和本地模式。

一般情况下会以本地模式运行，包会被安装到和你的应用程序代码的本地node_modules目录下。

在全局模式下，Node包会被安装到Node的安装目录下的node_modules下

为什么要保存至PACKAGE.JSON？

因为node插件包非常大，版本庞杂，所以不加入package信息，模块间的依赖变得非常困难，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。 每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

PACKAGE.JSON 属性说明：

name - 包名。（不要把node或者js放在名字中）

version - 包的版本号。

dependencies - 项目运行所依赖的模块

devDependencies - 项目开发所需要的模块

bin - 这需要在你的package.json中提供一个bin字段，它是一个命令名和本地文件名的映射。在安装时，如果是全局安装，npm将会使用符号链接把这些文件链接到prefix/bin，如果是本地安装，会链接到./node_modules/.bin/

npm常用命名

使用npm卸载插件：npm uninstall < name > [-g] [--save-dev] PS：不要直接删除本地插件包

使用npm更新插件：npm update < name > [-g] [--save-dev] 

更新全部插件：npm update [--save-dev] 

查看npm帮助：npm help 

查看当前目录已安装插件：npm list 

还有一些npm的简单命令就不多说了

PS：npm安装插件过程：从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），解决办法就是cnpm

CNPM介绍：

官方网址：http://npm.taobao.org

安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误 

PS：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。

3.常见问题

bower 和 npm有什么区别

4.解决方案

npm 是伴随 Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来， npm 官网经过一次改版，打出的口号是，javascript 的包管理器，所以，其已经不在局限于是 Node.js 的模块管理了，已经通用到了所有 js 的包管理工具了，可以说，前后通吃了。

bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和 bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由 程序员自己解决）。

嵌套依赖，指的就是，你依赖的软件包，还有它自己的依赖，好像摘葡萄，一摘一大串。在服务器环境的时候，这并没什么关系，因为存储空间够大，一切代码都是本地运行，只要解决完依赖就行了， 但是到了用户产品的浏览器里，就很成问题了，你不能让用户去下载好几M的js代码，那就太糟糕了。在这个情况下，就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件 都依赖同一个版本的jQuery。

扩展思考

cnpm有哪些问题？

1.cnpm 的仓库只是 npm 仓库的一个拷贝，它不承担 publish 工作，所以你用 cnpm publish 命令会执行失败的

2.不仅是 publish 会执行失败，其它的需要注册用户(npm adduser)、或者修改 package 状态等命令都无法用 cnpm

7.参考文献

npm 模块安装机制简介

开发者对 npm 公司不满，unpublish 了自己的所有模块

npm的一些常用命令

bower 和 npm 的区别详细介绍

更多提问

Q:全局安装和本地安装的区别？

因为全局模式安装,包可以供所有的程序使用。本地安装则不可以。 npm 默认会把包安装到当前目录下。这反映了 npm 不同的设计哲学。如 果把包安装到全局,可以提高程序的重复利用程度,避免同样的内容的多 份副本,但坏处是难以处理不同的版本依赖。如果把包安装到当前目录, 或者说本地,则不会有不同程序依赖不同版本的包的冲突问题,同时还减 轻了包作者的 API 兼容性压力,但缺陷则是同一个包可能会被安装许多次。

Q:为什么进行了全局安装还要进行本地安装

1、在js实例代码中，默认下node.js会在NODE_PATH和目前js所在项目下的node_modules文件夹下去寻找模块，因此，如果只是全局安装，不能直接通过require()的方式去引用模块，需要手动解决包路径的配置问题，当然你也可以复制全局安装的node_modules文件夹到项目下，还有办法可以选择将环境变量的NODE_PATH设置为C:\Program Files\nodejs。

 2.对于包的更新不好管理，可能你需要为每个包重新命名，如gulp@3.8.1、gulp@3.9.1...，为了区别不同项目使用指定的包，保证模块之间的相互依赖，区别每个项目正常运行

Q：如何在package.JSON的dependencies和devDependencies写入信息

A:npm install --savebabel-cli和npm install -devbabel-cli使用这两个命令安装后可自动写入文件

npm install --save-devbabel-cli也可以在一起用

链接：https://www.jianshu.com/p/f581cf9360a2   来源：简书   作者：没事儿啊