Mac下搭建Vue开发环境以及新建Vue项目及启动Vue项目

╰半橙微兮° 2023-07-13 10:56 152阅读 0赞

1、安装HomeBrew,如果有了则忽略这一步:

  1. #开始安装,中间可能要输入电脑密码,耐心等待即可安装成功。可通过brew -v 查看版本。
  2. ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在这里插入图片描述

2、如果使用HomeBrew下载一些东西速度很慢可以参考以下链接:

Mac的homebrew更换为阿里巴巴的源 (解决下载速度过慢问题)

3、安装Nodejs:

  1. #终端输入下面命令即可开始安装nodejs
  2. brew install nodejs

在这里插入图片描述

4、查看Nodejs版本:

  1. #终端输入以下命令查看版本 我的v13.10.1
  2. node -v

在这里插入图片描述

5、安装npm :

  1. #阿里淘宝镜像
  2. npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述

6、切换npm的源:

  1. #查看npm的源
  2. npm config get registry
  3. #更换为淘宝的源
  4. npm config set registry https://registry.npm.taobao.org

在这里插入图片描述

7、安装webpack:

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

  1. #下列命令安装webpack
  2. cnpm install webpack -g

在这里插入图片描述

8、安装vue脚手架(自动搭建vue项目框架的工具):

  1. #输入下列命令 安装vue脚手架 耐心等待下载完成
  2. sudo npm install -g vue-cli

在这里插入图片描述

9、查看vue是否安装成功:

  1. vue list

在这里插入图片描述

10、创建vue项目:

  1. #xuanvuetest是项目名称 可以自行更改 这一步可能会很慢,耐心等待,如果过长,则退出重新运行
  2. vue init webpack xuanvuetest

在这里插入图片描述
在这里插入图片描述

11、启动vue项目(注意切换到你创建的vue项目的文件目录下):

  1. #启动项目 注意切换到你项目的文件目录下
  2. npm run dev
  3. #关闭请ctrl+c

在这里插入图片描述

12、打开图中地址:

http://localhost:8080

在这里插入图片描述

13、推荐使用Visual Stodio Code 管理Vue项目:

在这里插入图片描述
在这里插入图片描述

14、遇到困难可以评论(有信必回)小轩微信号tangchenxuan1999

发表评论

表情:
评论列表 (有 0 条评论,152人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vue项目环境

    [vue-用Vue-cli从零开始搭建一个Vue项目][vue-_Vue-cli_Vue]   Vue是近两年来比较火的一个前端框架(渐进式框架吧)。 Vue两大核心思想