Node、VueCli的安装及简单使用介绍
1 NodeJs的安装
注：本次安装以windows二进制文件64位的安装方式作为示例，版本12.12.0，系统window7
有的nodejs版本不支持win7，在win7系统中执行npm -v时会有以下提示
This application is only supported on Windows 8.1, Windows Server 2012 R2, or hi
gher.This application is only supported on Windows 8.1, Windows Server 2012 R2,
or higher.
下载v12.16.2及之前的版本即可
1.1 下载
官方下载地址：http://nodejs.cn/download/
历史版本:https://nodejs.org/zh-cn/download/releases/
win7系统选择下载v12.16.2及之前的版本，更高版本在win7安装不了。
选择windows64位的二进制文件
1.2 安装
压缩包解压到自定义路径
解压后的目录结构图如下:
配置环境变量path
将解压后的目录路径追加到Path变量
配置完毕之后启动cmd，（划重点）记住是启动cmd！ 并不是在原来打开的cmd窗口操作，输入node -v，出现如下版本信息表示配置成功，如图：
至此，nodejs安装成功.nodejs自带有npm，npm也安装好了。
2 NodeJs与NPM的配置
2.1 设置资源管理包和缓存路径
node全局安装的modules都在C盘不方便管理，我们可以自定义node安装位置，如果你换个开发环境，可以把目录整体打包安装到新的开发环境。
在nodejs安装目录下新建node_global、node_cache 文件夹
通过CMD命令执行：
npm config set prefix "D:\ProgramFiles\node-v12.12.0-win-x64\node_global"
npm config set cache "D:\ProgramFiles\node-v12.12.0-win-x64\node_cache"
2.2 新增NODE_PATH环境变量
在环境变量中新增 NODE_PATH D:\ProgramFiles\node-v12.12.0-win-x64\node_global\node_modules
2.3 新增配置path 环境变量
在path中新增 D:\ProgramFiles\node-v12.12.0-win-x64\node_global
2.4 验证
安装express验证
npm --registry https://registry.npm.taobao.org install -g express
查看目录D:\ProgramFiles\node-v12.12.0-win-x64\node_global\node_modules看是否安装成功。
2.5 设置淘宝源
命令
npm config set registry https://registry.npm.taobao.org
验证命令
npm config get registry
如果返回https://registry.npm.taobao.org，说明镜像配置成功。
3 Vue CLI安装
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node版本要求8.9或更高版本。
安装命令
npm --registry https://registry.npm.taobao.org install -g @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：
vue --version
4 创建项目
进入创建项目的目录，运行以下命令来创建一个新项目：
vue create hello-world
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
没什么特别需求按回车使用默认设置即可。脚手架工具会开始自动构建工程目录，这需要等一段时间。
到工程目录下查看
5 Vue工程引入外部静态资源
vue工程一般通过npm拉取依赖。有些情况下，依赖是定制不开源的。现在以Cesium（需要测试的可以去官网下载Cesium.js文件）引入为例。
方式：通过在index.html文档中标签引入。
将静态资源拷贝到public 目录下（不要放在其他目录），然后直接在index.html中引入。在构建目标时，public 中的静态资源会被复制到输出目录中
创建一个vue模板测，CesiumContainer.vue
<template>
<div id="cesiumContainer"></div>
</template>
<script>
export default {
name: 'CesiumContainer',
data () {
return {
}
},
mounted(){
var cesiumContainer = document.getElementById("cesiumContainer");
var viewer = new Cesium.Viewer("cesiumContainer",{
//加载在线谷歌地图
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url:"http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
})
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesiumContainer{
width: 100%;
height: 80%;
}
</style>
在App.vue中引入模板
<template>
<div id="app">
<CesiumContainer/>
</div>
</template>
<script>
import CesiumContainer from './components/CesiumContainer'
export default {
name: 'App',
components: {
CesiumContainer
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
启动
npm run serve
6 构建项目
vue cli 3 中“静态资源”两种处理方式：
(1) 经webpack 处理：在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩
(2)不经webpack 处理：放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份，不做任何编译压缩处理
运行构建命令
npm run build
构成成功后，工程目录下会多出dist目录
public目录下的静态资源被直接拷贝到dist下(index.html除外，此模板会被 html-webpack-plugin 处理)，其他资源都被编译和压缩。
7 部署
如果你用 Vue CLI 处理静态资源并和后端框架一起作为部署的一部分，那么你需要的仅仅是确保 Vue CLI 生成的构建文件在正确的位置，并遵循后端框架的发布方式即可。
如果你独立于后端部署前端应用——也就是说后端暴露一个前端可访问的 API，然后前端实际上是纯静态应用。那么你可以将 dist 目录里构建的内容部署到任何静态文件服务器中，但要确保正确的publicPath。
本地预览
dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve
npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
serve -s dist