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介绍：
安装：命令提示符执行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 公司不满，unpublish 了自己的所有模块
更多提问
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 来源：简书 作者：没事儿啊
