NodeJs篇
一、下载安装nodeJS
1、下载地址官方网址 NodeJs
2、下载完成后,双击“node-v11.5.0-x64.msi”,开始安装Node.js,一路next,注意:安装目录看自己需求,本人安装在D:\nodejs目录下
3、测试
- 键盘按下【win+R】键,输入cmd 回车
- 输入命令node -v 和 npm -v
注意:新版的nodejs自带npm,可以理解npm就是对nodejs进行包管理,用于卸载和安装nodejs需要的东西
4、在安装目录文件夹下创建node_cache 和 node_global
5、管理员身份
打开cmd命令行
这里是为了设置npm全局安装的模块路径和缓存路径
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
二、配置环境变量
1、win10&win11:右键此电脑——属性——高级系统设置——高级——环境变量
2、创建 NODE_PATH 变量
3、在 系统变量
中 选择 Path 添加如下属性
4、测试
安装全局的vue框架和vue-cli脚手架
npm install vue -g
npm install vue-cli -g
推荐安装还有一些没列出来例如webpack等,留给大家去以后探索
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g rimraf
npm install -g nrm
npm install -g vite
Vscode篇
一、下载
- 选择对应的版本
二、安装
1、点击下载好的.exe文件
2、一路下一步到安装目录
3、一路下一步到配置选项
4、安装完成!
三、初始化配置
1、下载好的vsCode,任何插件都没有,下面说说我的一些前端常用配置插件,欢迎补充说明
2、名称: Chinese (Simplified) (简体中文) :这个插件是汉化的
3、Live Server:右键能够模拟服务器运行代码
4、open in browser:右键能够点击open in browser然后自动跳转浏览器运行代码(快捷键Alt+B)
5、Path Intellisense:这个插件是自动补全路径的,输入\后会弹出路径
6、Prettier - Code formatter:这个插件是代码格式化插件,但是要进行一些相应的配置,来约束代码的规范,下面的一份是我觉得很好用的配置项:
{
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按 shift+alt+F
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// 换行属性
"prettier.printWidth": 100,
// 箭头函数参数括号 avoid 能不加时就不加
"prettier.arrowParens": "avoid",
// #prettier去掉代码结尾的分号
"prettier.semi": false,
// 无尾逗号
"prettier.trailingComma": "none",
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 多行属性
// "wrap_attributes": "auto" // 当超出长度范围时才换行
"wrap_attributes": "force-expand-multiline" // 所有属性强制换行对齐
},
},
"prettier.useTabs": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"window.zoomLevel": 1,
"security.workspace.trust.enabled": false,
"workbench.colorTheme": "Monokai"
}
7、Vetur:这个插件是识别vue项目文件的,如果没有这个插件,vue文件是无法识别的
8、vscode-icons:这个插件是给对应的文件加上相应的字体图标的,看起来更加美观
安装好上述的环境后,前端的基本环境就搭建完了,现在来进行实战测试。测试一个vue项目
实战篇
1、打开cmd命令行,输入命令
vue init webpack my_project
配置如下