前端搭建环境

【前端搭建环境】一般来说,入门级前端工作者需要的环境不是很复杂
大概需要的是:node.js vscode(代码编辑器) git这三个就够了,可以做简单项目了
首先安装node.js,官网下载就好,选左边那个稳定版本,然后一路的next就好了,
在安装过程中,可能会要下到一些工具,可下可不下
在安装vscode的时候,去官网就可以,然后下载好了之后,你会发现他什么都没有,需要自己去下拓展插件

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

    推荐阅读