前端环境的安装与配置(前端开发需要安装哪些环境)

【前端开发环境安装、配置、项目搭建完整教程】前端开发环境安装、配置、项目搭建全教程

1.Node环境安装

简单来说，Node.js就是运行在服务器上的JavaScript。它是一个基于ChromeJavaScript运行时的平台。Node.js是一个事件驱动的I/O服务器端JavaScript环境，基于Google的V8引擎。V8引擎执行Javascript非常快并且具有非常好的性能。

1.node.js官网下载：下载地址

2.依据自己电脑Windows、macOS选择安装：

3.下载完毕后，依据安装流程傻瓜式一键安装。然后打开cmd命令行窗口，输入node-v查看node是否安装成功

2.VsCode开发工具安装

VSCode是近两年非常流行的开发工具。它不仅拥有提升开发体验的界面、轻量级的编辑器，还有丰富强大的插件。这些优秀的插件让VSCode生态系统更具吸引力，大大提高开发效率

1.vscode官网下载：下载地址

根据您的电脑系统选择对应版本下载

然后一键安装

2.vscode常用必备基础插件

1.Chinese(Simplified)LanguagePackforVisualStudioCode.

功能：中文编译器

2.Prettier-Codeformatter

功能：快速格式化代码

3.AutoRenameTag

功能：自动重命名HTML/XML标签

4.AutoCloseTag

功能：自动关闭HTML/XML标签:

5.GitHistory

功能：在VScode中集成git工具，查看git记录、文件历史记录、比较分支和提交代码等。

VSCode中其他优秀高效的插件可以在评论区分享

3.Git工具安装

Git是一个开源分布式版本控制系统，用于敏捷高效地处理任何项目，无论大小。

1.Git官网下载下载地址

根据电脑系统选择对应下载

一键傻瓜式安装

安装完成后，在cmd命令窗口输入git--version即可查看

2.Git配置

安装完成后，在桌面任意位置右键点击这里的Gitbash，会弹出命令窗口

配置用户信息

$gitconfig--globaluser.name''$gitconfig--globaluser.email''

Git常用命令

gitinit#初始化本地git仓库gitstatus#查看当前版本状态gitadd.#添加当前子目录下所有变更的文件gitcommit-m'xxx'#提交git分支#显示本地分支gitpushoriginmaster#将当前分支推送到远程master分支gitpulloriginmaster#获取远程分支master和合并到当前分支

4.前端框架脚手架安装

vite+vue3+ts是目前最新的技术栈，很可能是未来Vue前端的趋势。接下来我会一步步教大家如何搭建一个项目。

Vite快速搭建

1.打开命令行窗口

2.使用npm或者yarn

npm

npminit@vitejs/app

纱

纱线创建@vitejs/app

输入项目名称，选择vue，选择TS，进入项目npminstallnpmrundev

以上就完成了一个vue3项目的初步搭建

5.集成路由、Vuex、Axios

参考

集成路由

1.安装支持vue3的路由

npm我vue-router@4

2.创建src/router/index.ts文件

import{createRouter,createWebHashHistory,RouteRecordRaw}from'vue-router'constpaths:ArrayRouteRecordRaw=[{path:'/home',name:'Home',component:()=import(/*webpackChunkName:'Home'*/'@/views/home.vue')},{path:'/',redirect:{name:'Home'}}]constrouter=createRouter({history:createWebHashHistory(),routes})导出默认路由器

3.main.ts文件中挂载

import{createApp}from'vue'importAppfrom'@/App.vue'importrouterfrom'@/router/index'createApp(App).use(router).mount('#app')

集成Vuex

1.安装vue3状态管理工具vuex@next

npm我vuex@next

2.创建src/store/index.ts文件

import{createStore}from'vuex'constdefaultState={count:0}//创建一个新的store实例。exportdefaultcreateStore({state(){returndefaultState},mutations:{increment(state:typeofdefaultState){state.count+=1}},actions:{increment(context){context.commit('increment')}},getters:{double(state:typeofdefaultState){return2*state.count}}})

3.main.ts文件中挂载

import{createApp}from'vue'importAppfrom'@/App.vue'importrouterfrom'@/router/index'importstorefrom'@/store/index'createApp(App).use(router).use(store).mount('#app')

集成HTTP工具

1.安装Axios

npm我axios

2.配置Axios

封装了一个工具方法，存放在src/utils/http.ts中

importaxiosfrom'axios'import{Message}from'element-plus'//创建axios实例//创建请求时可以使用的配置选项constinstance=axios.create({withCredentials:true,timeout:1000,baseURL:''})//axios的全局配置instance.defaults.headers.post={'Content-Type':'application/x-www-form-urlencoded'}instance.defaults.headers.common={'Auth-Type':'company-web','X-Requested-With':'XMLHttpRequest',token:'sdfjlsdfjlsdjflsjflsfjlskd'}//添加请求拦截器(post只能接受字符串类型数据)instance.interceptors.request.use((config)={returnconfig},(error)={returnPromise.reject(error)})consterrorHandle=(status,other)={switch(status){case400:Message.error('消息验证失败')Breakcase401:Message.error('身份验证失败')breakcase403:Message.error('令牌验证失败')breakcase404:Message.error('请求的资源不存在')breakdefault:Message.error(other)break}}//添加响应拦截器instance.interceptors.response.use(//响应包含以下信息data,status,statusText,headers,config(res)=(res.status===200?Promise.resolve(res):Promise.reject(res)),(err)={Message.error(err)const{response}=errif(response){errorHandle(response.status,response.data)返回Promise。reject(response)}Message.error('请求失败')returntrue})导出默认实例

3.在需要使用的地方引入http.ts文件

importHttpfrom'@/utils/http'exportdefaultDefineComponent({setup(){conststore=useStore()constgetData=()={Http.get('url').then((res:Object)={console.log(res)})}return{store,getData}}})

以上就是前端环境配置和项目搭建的整个过程。如果有什么不足的地方，欢迎大家指正。