Mac下vue开发环境的搭建步骤以及新建项目
2021-06-17 本文已影响0人
Jesscia_Liu
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官网
-
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一套护眼主题并汉化
1.配置护眼主题调出命令面板找到settings.json并替换内容
- 使用快捷键组合 【Ctrl+Shift+p】（或找到左下角齿轮⚙图标,点击后选择第一个Cammand Palette打开），在弹出的搜索框中输入settings
- 选择Perferences:Open Settings (JSON)
- 替换成如下文本：
{
"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.汉化
- 打开vscode工具，在扩展中输入chinese，下载中文汉化包。
- 使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后，选择“zh-cn”。
- 自动重启vscode工具，安装成功。
