客户管理系统开发定制前端开发环境安装、配置、客户管理系统开发定制项目搭建全教程

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 ""
1
2

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到当前分支
1
2
3
4
5
6
7

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

vite+vue3+ts为目前最新技术栈，很有可能也是今后vue前端趋势，接下来则手把手教你学会构建一个项目

Vite快速搭建

1.打开命令行窗口

2.使用npm或者yarn

npm

npm init @vitejs/app
1

yarn

yarn create @vitejs/app
1

1. 输入项目名称
2. 选择vue
3. 选择TS
4. 进入项目
5. npm install
6. npm run dev
   
   
   以上则完成了一个vue3项目初步构建

5.集成路由、Vuex、Axios（技术栈vite+vue3+ts搭建为例）

参考出处：

集成路由

1.安装支持vue3的路由（vue-router@4）

npm i vue-router@4
1

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.main.ts 文件中挂载

import { createApp } from 'vue'import App from '@/App.vue'import router from '@/router/index'createApp(App).use(router).mount('#app')
1
2
3
4
5
6

集成Vuex

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

npm i vuex@next
1

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    }  }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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')
1
2
3
4
5
6
7

集成HTTP工具

1.安装 Axios

npm i axios
1

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

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    }  }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

以上则是前端环境配置、项目搭建全过程，如有不足之处望海涵和指正