一般来说,入门级前端工作者需要的环境不是很复杂
大概需要的是:node.js vscode(代码编辑器) git这三个就够了,可以做简单项目了
首先安装node.js,官网下载就好,选左边那个稳定版本,然后一路的next就好了,
在安装过程中,可能会要下到一些工具,可下可不下
在安装vscode的时候,去官网就可以,然后下载好了之后,你会发现他什么都没有,需要自己去下拓展插件
- 一般用的首先就是Chinese的那个中文插件,英文不好的可以使用
- 然后下载一个code Debugger
- ESLint这个还是有必要下的,在编写代码中,规范是相当重要的
- 前端三剑客HTML CSS JS 这三个有个插件用来拓展编码的,提高效率。叫做HTML CSS Support
- JavaScript(es6) code snippets,它支持ES6的语法提示
- Prettier-code formatter,对代码进行格式化的
- Vue3 snippets这是一款Vue2和Vue3开发中提供代码片段的,语法高亮等作用
大概是这些
在下载git的时候,需要在Vscode中进行配置,其实一般来说,vscode中会自动继承你电脑里面的开发工具,在vscode设置里直接找到Shell:power就可以,把这个git bush设置成默认的终端就可以了。
然后就是一些命令和步骤。 - 选中自己的node,看自己的安装目录,安装在哪就cd到哪
- 镜像安装一下自己的npm 命令是:npm config set registry https://registry.npm.taobao.org
- 安装脚手架 npm install -g vue-cli
- 看看是否安装 输入命令 vue -version
- 创建自己要建立项目的目录,注意:git bush是不识别中文路径的
- 然后cd到那个目录
- 初始化vue vue init webpack 项目名
- 选择所建项目的标准 注意:其中两个test是测试,可以不安装,eslint对新手不太友好,可以视自己情况出发。他的格式校验太严格,差个空格也报错。
- 选择所建项目,输入cd xxx
- 输入code . 。这个命令是让vscode打开项目代码。vscode会打开一个新窗口,你能够看到自己建立的项目
- 安装vux的ui库 输入命令:npm install vux --save
- npm run dev运行项目。
到此,环境搭建完毕。