Front-end development environment installation, configuration, project construction full tutorial
1.Node environment installation
简单的说 Node.js 就是运行在服务端的 JavaScrip，基于 Chrome JavaScript 运行时建立的一个平台，Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
1. Node.js official website download: download address
2. Choose to install according to your computer Windows, macOS:
3. After the download is complete, follow the installation process for one-click installation. Then open the cmd command line window and enter node -vto see if the node is installed successfully
2. VsCode development tool installation
VS Code是这两年非常热门的一款开发工具，它不仅有提升开发体验的界面、轻量化的编辑器，还有丰富而强大的插件，这些优秀的插件使得VS Code生态体系更加吸引人，让开发效率大大提升
1. Vscode official website download: download address
Choose the corresponding version to download according to your computer system
, and then install it with one click
2. Vscode commonly used essential basic plug-ins
1.Chinese (Simplified) Language Pack for Visual Studio Code.
Function: Compiler Sinicization
2.Prettier - Code formatter
Function: Quickly format the code
3.Auto Rename Tag
Role: Automatically rename HTML/XML tags
4.Auto Close Tag
Role: Automatically close HTML/XML tags:
5.Git History
Function: Integrate git tools in VS code, view git records, file history, compare branches and submit code, etc.
Other excellent and efficient plug-ins in vscode can be shared in the comment area
3. Git tool installation
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目
1. Git official website download download address
Select the corresponding download according to the computer system
One-click installation for fools
After installation, enter in the cmd command window git --versionto view
2. Git configuration
After installation, right click anywhere on the desktop, click Git bash here, and a command window will pop up
Configure user information
$ git config --global user.name ""
$ git config --global user.email ""
Git common commands
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. Front-end framework scaffolding installation (technical stack vite+vue3+ts construction as an example)
vite+vue3+ts为目前最新技术栈，很有可能也是今后vue前端趋势，接下来则手把手教你学会构建一个项目
Vite quick build
1. Open the command line window
2. Use npm or yarn
npm
npm init @vitejs/app
yarn
yarn create @vitejs/app
- Enter project name
- choose vue
- Select TS
- enter project
- npm install
- The above npm run dev
has completed the initial construction of a vue3 project
5. Integrated routing, Vuex, Axios (technical stack vite+vue3+ts construction as an example)
Reference source: Experience the whole process of building a project with vite + vue3 + ts
integrated routing
1. Install a route that supports vue3 (vue-router@4)
npm i vue-router@4
2. Create the src/router/index.ts file
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. Mount in the main.ts file
import {
createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router/index'
createApp(App).use(router).mount('#app')
Integrate Vuex
1. Install the vue3 state management tool vuex@next
npm i vuex@next
2. Create the src/store/index.ts file
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. Mount in the main.ts file
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')
Integrated HTTP tools
1. Install Axios
npm i axios
2. Configure Axios
Encapsulate a tool method, stored in 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. Introduce the http.ts file where it needs to be used
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
}
}
})
The above is the whole process of front-end environment configuration and project construction. If there are any deficiencies, please correct me.