大致分这么几个骤:
1. 安装node 、npm 、nvm
2. 安装git 、vscode 以及vscode上的一些插件
3. 安装vue-cli
以下详细来说每个步骤
1. 安装node 、 npm 、nvm
在官网下载的 node 安装包,在mac上运行会自动安装在全局目录,使用过程中经常会遇到一些权限问题,所以推荐按该网站 https://www.runoob.com/w3cnote/nvm-manager-node-versions.html 介绍的方法卸载全局安装的 node/npm。
所以我们最好是先安装nvm ,再通过nvm来安装node和npm, 安装nvm 可参照它的官网 https://github.com/nvm-sh/nvm/blob/master/README.md#installing-and-updating
不过也会有个小问题,那个安装的shell脚本可能会无法下载,所以如果是mac电脑, 最简单的办法是使用 brew install nvm 来进行nvm的安装 , 安装完成后需进行简单的配置, 在终端窗口下执行
echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile
. ~/.bash_profile //让环境变量生效。
这样就可以使用nvm了来安装 node和npm。
nvm list //可以查看当前已安装的node版本 nvm install {node版本号} //来安装node, 当前最新版14.17.0
由于网速的原因,我们通过npm安装一些依赖的时候,最好使用国内的镜像,所以可以考虑装一下cnpm , 如下:
npm install -g cnpm --registry=http://registry.npm.taobao.org
2 . vscode上的一些插件的安装
Vetur
vue文件的语法高亮显示,附带有格式化功能Alt+Shift+F(格式化全文),可以对代码进行格式化检查.
vscode-icons
为文件类型提供相应的图标
css peek
代码中样式的关联
Eslint
用来检查代码
Auto Close Tag
自动闭合HTML/XML标签,只要输入前面一个标签,后一个结尾标签会自动生成,不用再跳到后面去添加相当的方便快捷.
Auto Rename Tag
自动同步修改对象开头/结尾的标签,修改标签的时候相当有用,当内容很长且相同标签比较多时不容易分辨,这是它作用的很大.不用担心找不到位置了,直接该前面的标签,对应的尾部标签会自动同步修改.
HTML Boilerplate
html模板化
3. 安装 vue-cli
cnpm install -g vue-cli
vue init webpack todolist //使用vue创建标准化项目
在todolist目录下执行:npm run dev
然后在浏览器上输入 http://localhost:8080 会看到如下效果: