锐客网

  1. 首页 > 睿知 > it技术 > >

前端搭建环境

前端

【前端搭建环境】一般来说，入门级前端工作者需要的环境不是很复杂
大概需要的是：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运行项目。
    到此，环境搭建完毕。

    推荐阅读


    上一篇：AddressSanitizer 技术初体验

    下一篇：Vue项目ERROR（Cannot find module 'xxxx'类报错的解决办法）