![WebGIS之Element前端组件开发](https://wfqqreader-1252317822.image.myqcloud.com/cover/368/44819368/b_44819368.jpg)
1.1.1 Vue的安装
在安装Vue之前,需要先安装node.js和vue-cli。
1.安装node.js
从node.js官网下载node,建议下载LTS版本(长期稳定版本),如图1-1所示。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_8_1.jpg?sign=1734427775-4ABtGuFJ5Tnlyo5lD9WU3EQFAFtNJBte-0-0d38615fd6f4404ae139ec21ec1f1829)
图1-1 在node.js官网下载node
Vue 的安装过程很简单,一直单击“下一步”按钮即可。安装完之后,在命令行窗口执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_9_1.jpg?sign=1734427775-NVLklW4pyaES63HwLgWdwk9Wu6foPHKG-0-42fa53201fe6c08c934a6068fa654b01)
可查看node的版本,若在命令行窗口中显示相应的版本号,则说明node安装成功了,如图1-2所示。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_9_2.jpg?sign=1734427775-WXtcd2TBPuigEj3yQZDicfvflkgmN66U-0-4e559db22d1253fcf01a6dd39a10c22e)
图1-2 在命令行窗口显示node的版本号
npm是node的包管理器,集成在node中,安装node后就有了npm。直接在命令行窗口中执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_9_3.jpg?sign=1734427775-8SkKckI0kifI2xyMC8NKILtBs47zYdyJ-0-c8049f3fe68e21a078f81eeb5239e285)
可看到npm的版本号,如图1-3所示。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_9_4.jpg?sign=1734427775-4cNdIGR5TCUpHx6RdB51hsKM1P3OdwNu-0-d3180eacb36828e772af95daf7673102)
图1-3 在命令行窗口显示npm的版本号
到目前为止,node的开发环境已经安装完成,也有了npm。由于有些npm资源被屏蔽了或者是在国外,所以会经常导致npm安装依赖包失败,因此还需要npm的国内镜像——cnpm。
在命令行窗口中执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_9_5.jpg?sign=1734427775-o9IbcGYlSVj7b1ejyWGynaI9o3KCMkm7-0-6a61bc068753fec095dcdaf012bafb06)
如果没有报错,则表示cnpm安装成功。在命令行窗口中执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_10_1.jpg?sign=1734427775-oTslAFUOMKzAb4HfcnZ6areLS9o9Vy66-0-7a5b653737b9e5301503eb3a70dbf070)
可查看cnpm的版本号,如图1-4所示。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_10_2.jpg?sign=1734427775-6Q6YIZSadDf1S1qUJC4qMdO8rvoK6cBA-0-326f7847194567b5da9fc8e573ecf472)
图1-4 在命令行窗口显示cnpm的版本号
成功安装cnpm之后,就可以使用cnpm来安装依赖包了。如果想进一步了解cnpm,可查看TAONPM官网。在下面的安装中,若安装速度过慢,则可将npm改为cnpm。
2.安装vue-cli脚手架构建工具
在命令行窗口中执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_10_3.jpg?sign=1734427775-EY0oOqNS4004oqzHK4G17dlU6xp1qJyO-0-a03760fa1a81deb888a54759b26c7dd0)
或者
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_10_4.jpg?sign=1734427775-WRZgKXdw0WjP7LaieTk9qq1JYdKNMMGz-0-94cc8c643d9061e593afd622f9f49879)
前者安装的是3.X版本的vue-cli,后者安装的是2.X版本的vue-cli。在命令行窗口中执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_10_5.jpg?sign=1734427775-ETuOQMm11ZRnHl2w3H9XxTnbhjLQBYsa-0-3b35e8e45a62f4c80dfcb28289cee393)
如果在命令行窗口中显示版本号,如图1-5所示,则表示vue-cli安装成功。注意,上面命令中的V要大写。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_10_6.jpg?sign=1734427775-0mHjyUZh3FHe8AJb5x71ictxobHexlbx-0-62dd584b2fc1364042003210d4c4dd4f)
图1-5 在命令行窗口显示Vue的版本号
2.X 版本的 vue-cli 只能使用命令行窗口来创建项目。首先在将要创建项目的地方按下shift+鼠标右键,在弹出的右键菜单中选择“在此处打开命令行窗口”选项;然后在命令行窗口中执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_11_1.jpg?sign=1734427775-Mc2aj2iaydgCU8h2POzYqge0eUkyErCR-0-48a215f4237947856d66d1dba1ab2e39)
firstApp是要创建的文件夹名称;最后根据自己的需要在命令行窗口中设置项目。
3.X版本的vue-cli可以使用可视化页面进行项目的创建,在命令行窗口执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_11_2.jpg?sign=1734427775-YDvq9JmV1FMclanZrc0d3Z27c3DB0ZJv-0-f0b3ddad1ad9c6fd4bbe98e0b24e535f)
即可打开可视化页面,如图1-6所示。使用可视化页面创建项目如图1-7所示。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_11_3.jpg?sign=1734427775-clHe3xq3iCNedf7ecN0ccBfTe6DRwK1C-0-38f2331acb9a06335fbf896379929be9)
图1-6 打开可视化页面的命令
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_11_4.jpg?sign=1734427775-8gw96kdg96K3sABTo8TYwrz8yZeu9gdg-0-ef072eaacc0303fcd3155a4365d0428b)
图1-7 使用可视化页面创建项目
3.X版本的vue-cli也可以使用命令行窗口创建项目,但需要安装一个桥接工具,在命令行窗口中执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_11_5.jpg?sign=1734427775-YsKwt1BcTKlX3iQxj0TLcecg8k800e6u-0-a2c830fd917bedff00e8d301b679c108)
即可安装桥接工具。在桥接工具安装成功后,在命令行窗口中执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_11_6.jpg?sign=1734427775-Gf6xTxbJ4mxhEa2DzIxVfMBagfZPBgpG-0-b20b62f3d1c769042ea7b182609c915b)
即可创建项目。
创建成功的项目目录结构如图1-8所示。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_12_1.jpg?sign=1734427775-cF0GVpjhgT947tWDoxTu4M6T6xiQO0IQ-0-314c6b7ce3b9f9b37322437e22a126bc)
图1-8 创建成功的项目目录结构
图1-8中,文件夹node_modules中保存的是项目的依赖包文件,package.json是项目依赖包的配置文件,该文件中的“dependencies”键(key)对应的值(value)是该项目引入的外部库文件,如图1-9所示。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_12_2.jpg?sign=1734427775-IyoprUKBRDWMVMXnz0dNgovLUddN5Vp2-0-7cc2105ffa2b974cf527aa02e6d3124a)
图1-9 项目引入的外部库文件
项目成功创建后,可以在编辑器的终端或者项目根目录打开命令行窗口并执行命令:
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_12_3.jpg?sign=1734427775-Z2p12YPKopBWzIkHqkuyesJQL989chd5-0-3f5e384114a8e7db83d477ae499538f3)
或
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_12_4.jpg?sign=1734427775-xZtgsJxknUtQYPiOyFxQn0ori4rnj5SG-0-19b508775211b1833431204a90690629)
来运行项目。项目运行成功后,会有一个IP地址,浏览器中输入该IP即可打开创建的项目,打开项目时的初始化页面如图1-10所示。
![](https://epubservercos.yuewen.com/2BE4CA/23950045301099506/epubprivate/OEBPS/Images/43162_13_1.jpg?sign=1734427775-wFS5JYyMJlcpWq2gZ7A3EwcxHNIAfg0g-0-2b00d2610672fc23fd46d0fe641c8f8e)
图1-10 打开项目时的初始化页面
需要注意的是,一定要全局安装vue-cli脚手架构建工具。全局安装是指在计算机的任何位置都可以访问Vue,局部安装只能在局部位置访问Vue,在命令行窗口中使用“-g”表示全局安装。如果采用全局安装,却不能在任何位置访问Vue,那么将“D:\nodejs\node-globalnpm”(根据自己node的安装位置)添加到系统环境变量中就可以解决该问题。