前端开发环境安装
    
    
    
、配置     


     


     


、项目搭建全教程

1.Node环境安装

简单的说 Node.js 就是运行在服务端的 JavaScrip
    
    
    
，基于 Chrome JavaScript 运行时建立的一个平台     


     


     


，Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境 




 




 




 ，基于 Google 的 V8 引擎

   

   

   
，V8 引擎执行 Javascript 的速度非常快     

     

     

，性能非常好
    
    
    
。

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

2.依据自己电脑Windows 




 




 




 、macOS选择安装：

3.下载完毕后  




  




  




 ，依据安装流程傻瓜式一键安装     


     


     


。然后打开cmd命令行窗口


  


  


  
，输入node -v查看node是否安装成功

2.VsCode开发工具安装

VS Code是这两年非常热门的一款开发工具     
     
     
，它不仅有提升开发体验的界面

   

   

   
、轻量化的编辑器   




   




   




 ，还有丰富而强大的插件



 



 



 
，这些优秀的插件使得VS Code生态体系更加吸引人               ，让开发效率大大提升

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

依据自己电脑系统选择对应版本下载

然后一键式傻瓜安装

2.vscode常用必备基础插件

1.Chinese (Simplified) Language Pack for Visual Studio Code.

作用：编译器汉化

2.Prettier - Code formatter

作用：对代码进行快速格式化

3.Auto Rename Tag

作用:自动重命名 HTML/XML 标签

4.Auto Close Tag

作用：自动闭合 HTML/XML 标签:

5.Git History

作用：在VS code中集成git工具    




    




    




 ，查看git记录















，文件历史记录               ，比较分支及提交代码等

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

3.Git工具安装

Git 是一个开源的分布式版本控制系统     



     



     



 ，用于敏捷高效地处理任何或小或大的项目

1.Git官网下载 下载地址

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

一键式傻瓜安装

安装完毕后在cmd命令窗口输入git --version查看

2.Git配置

安装好后














，在桌面任意位置右键
    
    
    
，点击Git bash here     


     


     


，会弹出命令窗口

配置用户信息 $ git config --global user.name "" $ git config --global user.email "" Git常用命令 git init # 初始化本地git仓库（创建新仓库） git status # 查看当前版本状态（是否修改） git add . # 增加当前子目录下所有更改过的文件 git commit -m xxx # 提交 git branch # 显示本地分支 git push origin master # 将当前分支push到远程master分支 git pull origin master # 获取远程分支master并merge到当前分支

4.前端框架脚手架安装（技术栈vite+vue3+ts搭建为例）

vite+vue3+ts为目前最新技术栈 




 




 




 ，很有可能也是今后vue前端趋势

   

   

   
，接下来则手把手教你学会构建一个项目

Vite快速搭建

1.打开命令行窗口 2.使用npm或者yarn

npm

npm init @vitejs/app

yarn

yarn create @vitejs/

app 输入项目名称 选择vue 选择TS 进入项目 npm install npm run dev

以上则完成了一个vue3项目初步构建

5.集成路由     

     

     

、Vuex  




  




  




 、Axios（技术栈vite+vue3+ts搭建为例）

参考出处：体验vite + vue3 + ts搭建项目的全过程

集成路由

1.安装支持vue3的路由（vue-router@4） npm i vue-router@4 2.创建 src/router/index.ts 文件 import { createRouter, createWebHashHistory, RouteRecordRaw } from vue-router const routes: Array<RouteRecordRaw> = [ { path: /home, name: Home, component: () => import(/* webpackChunkName: "Home" */ @/views/home.vue) }, { path: /, redirect: { name: Home } } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router 3.main.ts 文件中挂载 import { createApp } from vue import App from @/App.vue import router from @/router/index createApp(App).use(router).mount(#app)

集成Vuex

1.安装vue3状态管理工具 vuex@next npm i vuex@next 2.创建 src/store/index.ts 文件 import { createStore } from vuex const defaultState = { count: 0 } // Create a new store instance. export default createStore({ state() { return defaultState }, mutations: { increment(state: typeof defaultState) { state.count += 1 } }, actions: { increment(context) { context.commit(increment) } }, getters: { double(state: typeof defaultState) { return 2 * state.count } } }) 3.main.ts 文件中挂载 import { createApp } from vue import App from @/App.vue import router from @/router/index import store from @/store/index createApp(App).use(router).use(store).mount(#app)

集成HTTP工具

1.安装 Axios npm i axios 2.配置 Axios

封装一个工具方法     

     

     

，存放在src/utils/http.ts

import axios from axios import { Message } from element-plus // 创建axios实例 // 创建请求时可以用的配置选项 const instance = 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) => { return config }, (error) => { return Promise.reject(error) } ) const errorHandle = (status, other) => { switch (status) { case 400: Message.error(信息校验失败) break case 401: Message.error(认证失败) break case 403: Message.error(token校验失败) break case 404: Message.error(请求的资源不存在) break default: 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 } = err if (response) { errorHandle(response.status, response.data) return Promise.reject(response) } Message.error(请求失败) return true } ) export default instance 3.在需要使用的地方引入http.ts文件 import Http from @/utils/http export default defineComponent({ setup() { const store = useStore() const getData = () => { Http.get(url).then((res: Object) => { console.log(res) }) } return { store, getData } } })

以上则是前端环境配置


  


  


  
、项目搭建全过程  




  




  




 ，如有不足之处望海涵和指正