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工具，安装成功。