Mac下vue开发环境的搭建步骤以及新建项目

Mac下vue开发环境的搭建步骤以及新建项目

相关定义:

1.什么是vue

Vue 是一套用于构建用户界面的渐进式框架

参考:什么是vue

2.什么是node.js

Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境
参考 什么是node.js

3.Node.js集成开发环境哪家强?

Visual Studio Code由微软出品,但它不是那个大块头的Visual Studio,它是一个精简版的迷你Visual Studio,并且,Visual Studio Code可以跨!平!台!Windows、Mac和Linux通用。
参考:搭建Node开发环境

一、Vue依赖的环境搭建

cnpm是淘宝对npm的镜像,如果安装速度慢建议可以尝试cnpm

1.安装Node环境

  • 和java需要安装JDK一样,vue也要安装Node环境

  • 查看node.js当前版本

$ node -v
安装方法参考node.js官网
  • 如何安装Node.js

  • 1.直接在官网下载安装包

  • 2.使用homebrew下载

$ brew install node

2.安装npm/更新npm

  • 新版本Node.js已经包含安装了npm

  • 查看npm版本

$ npm -v
  • 如果需要更新npm
$ npm install -g npm 
  • 或使用淘宝的镜像命令
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装webpack

$ cnpm install webpack -g

4.安装Vue命令行工具 (CLI),脚手架

$ sudo npm install -g vue-cli
  • 如果报警告npm WARN deprecated vue-cli等,说明npm版本过低,需要更新npm。

5.检查安装是否成功

$ vue -V

二、使用Vue框架初始化项目

$ vue init webpack my-project

1.安装出现的问题

  • 会从github上下载一些配置(此处终端翻墙没用)
一直停留在downloading template
  • 终端翻墙没用 会报错
vue-cli · Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 192.168.0.1:8086

解决方法I--亲测

  • 更新vue-cli版本到3以上
$ npm uninstall -g @vue/cli
$ npm install -g @vue/cli
$ vue -V
@vue/cli 4.5.13
  • 同时更新node.js版本适配vue-cli3
    参考:node版本如何升级.更新node.js时需要使用管理员权限,即在语句前加sudo
  • 更新node版本到稳定版
$ npm i -g n --force
$ sudo n stable
$ node -v
v14.17.1
  • 安装好后可以使用新的创建项目指令
$ vue create my-project
  • 若还想要使用vue init webpack my-project创建项目指令,需要额外安装init包.
$ npm i -g @vue/cli-init
$ vue init webpack my-project

解决方法II(不更新vue到3以上版本的解决方法)

前端框架VUE下载一下停留在downloading template解决方法

2.正式安装

  • 注意项目名不能使用大写字母

I.使用create,使用默认配置一路回车即可

  • 安装参考生成的项目的README.md
$ vue create vue-test
$ cd vue-test
$ cnpm install  或者 $ yarn install
$ cnpm run serve 或者 $ yarn serve
 DONE  Compiled successfully in 2052ms         

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://你的ip:8081/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

II.使用init,使用默认配置一路回车即可

  • 安装参考生成的项目的README.md
$ vue init webpack my-project
$ cd my-project
$ cnpm install
$ cnpm run dev
  DONE  Compiled successfully in 3156ms  
  I  Your application is running here: http://localhost:8080

III.create和init安装方式区别参考:

vue create 和vue init webpack的区别

  • 使用create创建的项目文件夹占用空间更小。

3.运行项目

  • 在浏览器输入localhost:8080即可
在这里插入图片描述

三、搭建Node.js集成开发环境---Visual Studio Code

参考文章:使用vscode运行vue架构的项目

四、配置Visual Studio Code一套护眼主题并汉化

参考文章:settings文件怎么打开? VSCode打开并配置settings.json文件的技巧

1.配置护眼主题调出命令面板找到settings.json并替换内容

  1. 使用快捷键组合 【Ctrl+Shift+p】(或找到左下角齿轮⚙图标,点击后选择第一个Cammand Palette打开),在弹出的搜索框中输入settings
  2. 选择Perferences:Open Settings (JSON)
  3. 替换成如下文本:
{
    "terminal.integrated.rendererType": "dom",
    "workbench.sideBar.location": "left",
    "workbench.colorCustomizations": {
        "[Default Light+]":{
            "editor.selectionHighlightBackground": "#B2D7FF",
            "editor.selectionBackground": "#B2D7FF",
            "editor.background": "#cce8cf",
            "editorGutter.background": "#cce8cf",
            "editorCursor.foreground": "#ff0000",
            "editor.lineHighlightBorder": "#d3d3d3",

            "terminal.background": "#ffffff",
            "terminal.foreground": "#181818",
            "terminalCursor.background": "#B2D7FF",
            "terminalCursor.foreground": "#B2D7FF",
            "terminal.ansiBlack": "#181818",
            "terminal.ansiBlue": "#7CAFC2",
            "terminal.ansiBrightBlack": "#585858",
            "terminal.ansiBrightBlue": "#7CAFC2",
            "terminal.ansiBrightCyan": "#86C1B9",
            "terminal.ansiBrightGreen": "#A1B56C",
            "terminal.ansiBrightMagenta": "#BA8BAF",
            "terminal.ansiBrightRed": "#AB4642",
            "terminal.ansiBrightWhite": "#f8f8f8",
            "terminal.ansiBrightYellow": "#F7CA88",
            "terminal.ansiCyan": "#86C1B9",
            "terminal.ansiGreen": "#A1B56C",
            "terminal.ansiMagenta": "#BA8BAF",
            "terminal.ansiRed": "#AB4642",
            "terminal.ansiWhite": "#D8D8D8",
            "terminal.ansiYellow": "#F7CA88",
            "terminal.integrated.cursorBlinking": true,
            "terminal.integrated.lineHeight": 1.6,
            "terminal.integrated.letterSpacing": 0.1,
            "terminal.integrated.fontSize": 30, //字体大小设置
            "terminal.integrated.fontFamily": "Lucida Console", //字体设置
            "terminal.integrated.shell.linux": "/bin/zsh",
        }

        
    },
    "editor.tokenColorCustomizations": {
        "[Default Light+]":{
            "comments": "#519657",
            "strings": "#7e3648",
            "functions": "#1c7887",
            "keywords": "#a207fc",
            "variables": "#0720fc",
            "numbers": "#e21d1d",
            "textMateRules":[
                {
                    "name": "Operator",
                    "scope": "keyword.operator",
                    "settings":{
                        "foreground": "#e21d1d",
                        "fontStyle": "bold"
                    }
                },
                {
                    "name": "Punctuation",
                    "scope": "punctuation",
                    "settings":{
                        "foreground": "#a207fc",
                        "fontStyle": "bold"
                    }
                }
            ]
        }
    },
    "editor.fontWeight": "500",
    "editor.fontSize": 18,
    "workbench.colorTheme": "Default Light+",
    "editor.fontFamily": "Consolas, '微软雅黑', monospace",
    "window.zoomLevel": 0
}
护眼主题

2.汉化

  1. 打开vscode工具,在扩展中输入chinese,下载中文汉化包。
  2. 使用快捷键组合【Ctrl+Shift+p】,在搜索框中输入“configure display language”,点击确定后,选择“zh-cn”。
  3. 自动重启vscode工具,安装成功。

你可能感兴趣的:(Mac下vue开发环境的搭建步骤以及新建项目)