mac配置vue3.0开发环境+首个地图应用_mac安装vue3

前言

以前用vue写过一个小小demo，没想到现在偶然能用上vue，重启记录一下方便以后查看，我的开发环境是mac和VScode。

教师管理系统小demo：有兴趣可以在这个专栏看看：VUE
包含配置windows环境：【小白学习Vue | 1】安装Vue并配置HBuilder

正文

1.环境

1.1 vscode安装

1. 官网下载：https://code.visualstudio.com/
   

   下载慢的问题：将域名改成vscode.cdn.azure.cn,国内镜像，后面的链接和之前的一样
   

   下载后，解压，拖拽到启动台即可

2. 自动安装语言，在扩展工具中安装，编译器的插件都可以在这里搜索：（ 中文Language Pack for Visual Studio Code）
   
   一些常用：（别人开发速度比你快，是因为别人会使用工具，get）
   

1.2 npm安装

1.官网下载：

安装：

终端：查看安装成功版本

node -v
npm -v
1
2

2. 安装镜像（这是mac的命令）

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose
1

下载成功：

验证：

cnpm -v
1

以后命令用cnpm就是镜像源，npm是官方，速度原因，你懂。

1.3 vue-cli安装

安装vue脚手架

sudo cnpm install -g vue-cli
1

验证安装成功，查看版本号：

vue -V
1

这是Vue2.0，现在大部分都用3.0了，这里做个升级

2.安装Vue3.0高版本

安装sudo npm install -g @vue/cli，会遇到几个bug，说一下解决方案：

卸载已安装的脚手架
sudo npm uninstall vue-cli -g

修改目录的可访问权限，因为mac高版本会对目录做保护，读取的时候会有权限限制
sudo chown -R $(whoami) /usr/local/*
sudo npm i docsify-cli -g

安装最新版本
sudo npm install -g @vue/cli

提示我安装目录不为空，那就删除掉（根据你的提示操作文件）
sudo rm -rf /usr/local/lib/node_modules/@vue/cli
sudo rm -rf /usr/local/lib/node_modules/@vue/.cli-pPsrUrBg


这里我安装失败了一下，有的没有下载成功，解决方案是修改淘宝镜像后，再下载一次
npm config set registry https://registry.npm.taobao.org
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

完整运行记录如下：

(base) admin@wangyudedagongben vueTest % sudo npm install -g @vue/cli
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/@vue/cli
npm ERR! dest /usr/local/lib/node_modules/@vue/.cli-pPsrUrBg
npm ERR! errno -66
npm ERR! ENOTEMPTY: directory not empty, rename '/usr/local/lib/node_modules/@vue/cli' -> '/usr/local/lib/node_modules/@vue/.cli-pPsrUrBg'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/admin/.npm/_logs/2022-11-04T03_44_21_627Z-debug-0.log
(base) admin@wangyudedagongben vueTest % sudo npm i docsify-cli -g
Password:

added 205 packages, and audited 206 packages in 2m

16 packages are looking for funding
  run `npm fund` for details

7 vulnerabilities (6 moderate, 1 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
(base) admin@wangyudedagongben vueTest % sudo rm -rf /usr/local/lib/node_modules/@vue/cli
Password:
(base) admin@wangyudedagongben vueTest % sudo rm -rf /usr/local/lib/node_modules/@vue/.cli-pPsrUrBg
(base) admin@wangyudedagongben vueTest % sudo npm install -g @vue/cli                              
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno -54
npm ERR! network read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network 
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/admin/.npm/_logs/2022-11-04T04_33_27_527Z-debug-0.log
(base) admin@wangyudedagongben vueTest % npm config set registry https://registry.npm.taobao.org
(base) admin@wangyudedagongben vueTest % sudo npm install -g @vue/cli                           
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md

changed 847 packages in 1m
(base) admin@wangyudedagongben vueTest % vue -V
@vue/cli 5.0.8
(base) admin@wangyudedagongben vueTest % 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

我当前版本是5.0.8了。

3.第一个vue程序

1.在工程目录创建工程：map_demo是我这个工程目录的名称

vue create map_demo
1

我这里选择Vue 3


可以在cmd中进入文件目录进行初始化，也可以在编译器中初始化。我这里用的是VScode，在工程目录下有个Readme文件，其中初始化和执行指令都在其中，忘记了可以去复制复制~
2. 我个人比较喜欢cmd，运行成功就可以在浏览器打开地址预览了http://localhost:8080/

cd map_test
npm install
npm run serve
1
2
3

默认项目工程目录如下：

新开一个cmd，进入项目文件夹，运行编译动作：

npm run build
1

编译完成，会在工程目录下出现一个dist目录，里面就是可发布的内容啦。

总结

环境搭建到这里就结束了，接下来就是干活儿了，低头噼里啪啦敲^_