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

已于 2022-11-04 14:18:39 修改
阅读量3.6k 收藏 38
点赞数 9
分类专栏： # Vue # Html 文章标签： vue.js vscode npm
于 2022-03-31 13:59:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cungudafa/article/details/123869386
版权
Html 同时被 2 个专栏收录
22 篇文章 5 订阅
订阅专栏
Vue
12 篇文章 10 订阅
订阅专栏

目录

前言

以前用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

在这里插入图片描述
2. 安装镜像（这是mac的命令）

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

下载成功：
在这里插入图片描述
验证：

cnpm -v

在这里插入图片描述
以后命令用cnpm就是镜像源，npm是官方，速度原因，你懂。

1.3 vue-cli安装

安装vue脚手架

sudo cnpm install -g vue-cli

在这里插入图片描述
验证安装成功，查看版本号：

vue -V

在这里插入图片描述
这是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

完整运行记录如下：

(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 %

我当前版本是5.0.8了。

3.第一个vue程序

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

vue create map_demo

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

cd map_test
npm install
npm run serve

在这里插入图片描述
在这里插入图片描述
默认项目工程目录如下：
在这里插入图片描述
新开一个cmd，进入项目文件夹，运行编译动作：

npm run build

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

总结

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

cungudafa
关注
专栏目录
在Mac上安装Vue
weixin_35790277的博客
05-13 660
在Mac上安装Vue 1. 安装Node.js 1.1利用brew安装 首先要在mac上安装brew brew 是 Mac 下的一个包管理工具，作用类似于 centos 下的 yum。 brew 可以用一条命令，就可以在mac上安装、卸载、更新各种软件包，因为brew的使用方便，如今已成为使用mac电脑的程序员的必备工具 如果mac没有安装brew，执行下面的命令安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Hom
Vite+Vue3+TS+Electron构建桌面应用
weixin_30230009的博客
04-03 4212
前言之前开发项目遇到前端的需求，我通常会选择Vue2，无他，只是在众多前端框架中，我比较熟悉Vue2，此前尝试学过一段时间React，被它的Hook恶心到了，会了又学，学了又忘，所以还是回到Vue的怀抱，至于React，日后再挑战。本篇文章使用当前最新的前端技术体系来构建一个桌面应用，本篇只是记录项目搭建的过程并实现项目的打包与安装，先看效果图：image.png我们使用...
Mac 安装 vue3 环境
qq_61842012的博客
06-18 2497
Mac 如何配置 vue3 环境并使用ui 界面/ vscode 管理你的vue 项目。本教程仅适用于了解网络长城且会魔法的用户，配置全程需要稳定连接真正的互联网，否则你会因由于下载 nodejs 而绑定下载的 npm 包时遇到漫长的等待时间......
前端开发日记——在MacBook上配置Vue环境
最新发布
PleaSure乐事的博客
07-17 1376
如何在Mac上配置Vue环境，仅此一文，带你最快搭建环境
mac 搭建vue3框架
solitude1128的博客
07-28 1210
Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2。有输出就看输出版本是多少，如果版本在4.5以下，就卸载然后重新安装，如果在4.5及以上，就可以直接创建项目。当第一项选择手动配置时，会有该选项。监测时机，这里选第一个，保存就监测，不要等提交在监测，那样问题会很多。选择Y的话，以后创建项目会将该次选择的配置作为一个选项供你选择。三种选择，可以选默认3或者默认2或者自配，我这里选的自配。是否使用class风格的组件语法，输入y，回车。是否使用babel做转义，输入y，回车。
macbook air vue3安装
wandoumm的博客
05-18 1042
vue3 mac 安装
mac系统安装node和vue3
qq_45435600的博客
04-10 766
cnpm的安装：npm install -g cnpm --registry=https://registry.npm.taobao.org。3.0版本： sudo npm install -g @vue/cli。2.0版本：sudo npm install -g vue-cli。
Vue+Electron打包桌面应用(从零到一完整教程)
weixin_68658847的博客
07-15 1765
Vue+Electron打包桌面应用(从零到一完整教程)
python+Django+vue+mysql+pycharm开发环境的搭建
热门推荐
技在手，能在身，思在脑，从容过生活。
01-28 2万+
工作之余断断续续根据网上找到的教程进行环境搭建，搭建了多个。 但是一直没有一个整体概念，到底该先做什么，后做什么， 操作一步后，结果应该是怎样 另外，网上的教程都是直接用命令行操作，用pycharm又应该怎么弄呢 环境搭建好以后，应该怎么分目录结构，应该先从哪里的代码开始写，写了以后，又需要做哪些配置 这些问题一直困扰着我，所以我决定边学边记录整理。 也希望能帮助同为初学者的你少走一些...
跟技术胖学vue3.0(typescript版)(一) 环境搭建 , 工程创建 , 工程结构
finedayforu的博客
10-14 1200
vue3.0终于来了, 下面我们开始愉快的尝鲜吧!!! vue3官方网站 : https://v3.vuejs.org/ vue3.0 B站发布会:https://www.bilibili.com/video/BV1iA411J7cA?from=search&seid=2979047174353974296 vue3.0 新特性 vue3.0 向下兼容vue2.0 ...
Vite+Vue3+Element-plus+Axios+Router前端框架搭建 2
skdsxx的专栏
07-20 516
19.element-plus组件按钮鼠标移动到文字部分，无法触发点击事件 开始怀疑是没有安装sass，通过npm install sass -i 安装sass之后，报错 通过在package.json中修改版本前的附后解决Fix Using / for division is deprecated removed in DartSass2 | Cloudhadoop 然而修改之后，问题仍然没有解决，最后在网上找到了一个解决方案 z-index:99这个css属性影响了按钮的
手把手教你创建并启动一个Vue3项目（Windows版）
易雪寒的博客
06-19 2081
1、因为npm的资源默认采用国外的，国内执行对应的安装口令会比较慢，所以我们可以把npm资源切换到国内，这样安装框架的速度就会提升。4、验证安装npm是否成功，npm是Node中自带的打包工具，输入npm -version，输出npm版本号即表示安装成功。2、最后如上图显示，我们就完成我们VUE脚手架的安装了，我们在命令窗口用口令查看当前脚手架版本。
vue初体验1：新建vue3项目并启动访问（mac）
小浪与艳花
07-05 4746
HBuilderX集成了多种开发工具和语言，包括HTML、CSS、JavaScript、TypeScript、Vue.js、React等，可以帮助开发者更高效地进行Web前端开发。可以快速构建vue的工具，自动安装vue所需要的插件，避免手动安装各种插件，以及寻找各种cdn并一个一个引入的麻烦。2、集成了多种调试工具和模拟器，可以在不同的设备和浏览器上进行实时调试和预览，有助于更快的定位和解决问题。3、有多种代码重构和自动化工具，如代码格式化、自动缩进、自动补全等，有助于更规范和高效地编写代码。
mac上安装vue
weixin_44904482的博客
03-23 2319
1. [node.js官网](https://nodejs.org/en/)下载对应安装包，下载成功后终端输入`node -v`输出对应版本。 2. 安装淘宝镜像，终端输入`sudo npm install -g cnpm --registry=https://registry.npm.taobao.org`，通过终端输入`cnpm -v`，返回版本号说明安装成功。 3. 安装Vue3，终端输入`sudo cnpm install -g @vue/cli`，完成后查看版本`vue -v`
【brew】Mac上安装vue3
Badme
11-29 474
【brew】Mac上安装vue3
mac 创建Vue3项目
weixin_44275763的博客
12-24 1457
安装vue-cli npm 或 yarn 安装 npm install -g @vue/cli yarn global add @vue/cli 查看版本（是否安装成功）： vue -V (大写的V) vue --version 创建项目 进入项目目录 执行vue create test01(项目名称) 这里我选择了第3种手动，回车键确认 选择自己想要的配置，我选择如下 选择vue版本 这里我选3x 是否使用 history 路由模式 这里我选y 选择css预处理器 这里我选node的时候一直报
Mac苹果电脑Vue3-devtools开发者工具安装方法以及问题解决方式
m0_56769104的博客
07-01 467
参考。
Mac安装vue搭建vue项目
Riqk_Qin的专栏
08-25 302
1.访问node.js官网：https://nodejs.org/en/下载对应安装包。 点击添加图片描述（最多60个字）编辑 2.安装完成，在终端输入 ： node -v 如果返回版本号，代表安装成功。建议安装之前给目录权限，至于怎么给目录权限，这里不做说明，网上有很多资料。 3.安装淘宝镜像 至于为何要安装淘宝镜像，因为有帐幕阻挡我们访问npm 的境外网站；好奇心强的朋友可以进行尝试，运气差的要很久、很久、有可能一晚上时间，别问我怎么知道的。 废话少说，在终端输入： npm inst
macbook vue安装
sweet__queen的博客
10-30 362
1、安装 brew，这个简单，直接执行远程脚本 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2、安装 nodejs，这一步时间可能略长（执行时间长短也有可能跟网络有关系） brew install nodejs 3、获取nodejs模块安...
用vue3.0 +vite +pinia +ts搭建一个vue的架子
05-24
好的，下面是搭建 Vue 3.0 + Vite + Pinia + TypeScript 的步骤： 1. 安装 Node.js，推荐使用 LTS 版本。 2. 安装 Vite： ``` npm init vite-app my-project ``` 这里我们使用 Vite 初始化一个新项目，名称为 my-project。 3. 安装依赖： ``` cd my-project npm install ``` 4. 安装 Vue 3.0： ``` npm install vue@next ``` 5. 安装 Pinia： ``` npm install pinia ``` 6. 安装 TypeScript： ``` npm install --save-dev typescript ``` 7. 配置 TypeScript： 在项目根目录下创建 `tsconfig.json` 文件，内容如下： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "sourceMap": true, "moduleResolution": "node", "esModuleInterop": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"], "exclude": ["node_modules"] } ``` 8. 安装 Pinia Devtools（可选）： ``` npm install @pinia/devtools --save-dev ``` 9. 在 `main.ts` 中进行配置： ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) // 创建 Pinia 实例 const pinia = createPinia() // 将 Pinia 实例挂载到 app 上 app.use(pinia) app.mount('#app') ``` 10. 编写组件： 在 `src` 目录下创建一个 `components` 目录，然后创建一个 `HelloWorld.vue` 组件： ```vue <template> <div> <h1>Hello, {{ name }}</h1> <button @click="increase">Increase</button> <p>{{ count }}</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { useStore } from 'pinia' export default defineComponent({ name: 'HelloWorld', setup() { const store = useStore() const name = store.getters.getName const count = store.state.count const increase = () => { store.commit('increase') } return { name, count, increase } }, }) </script> ``` 11. 在 `App.vue` 中使用组件： ```vue <template> <HelloWorld /> </template> <script lang="ts"> import { defineComponent } from 'vue' import HelloWorld from './components/HelloWorld.vue' export default defineComponent({ name: 'App', components: { HelloWorld, }, }) </script> ``` 12. 运行项目： ``` npm run dev ``` 至此，我们已经成功搭建了 Vue 3.0 + Vite + Pinia + TypeScript 的项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值