WEB 框架
WEB 框架
WEB 管理工具
nodejs
是一个开源的、跨平台的 JavaScript 运行时环境。一般我们只是简单的用了 Node.js 启动前端，不太深入了解也可以使用它。
详细内容参考以下内容。
yarn
快速、可靠、安全的依赖管理。
详细内容参考官网。Yarn 中文网。
webpack
一个基于 JavaScript 的构建工具。
详细内容参考官网。webpack 中文网。
eslint
代码检查工具。
详细内容参考官网。eslint 官网。
babel
JavaScript 编译器，可以帮助你使用下一代 JavaScript 语法编写和运行代码。
详细内容参考官网。babel 官网
Rollup
一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。
详细内容参考官网。rollup.js 官网。
Web 开发框架
element-ui
一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
详细内容参考官网。Element 中文网。
echarts
一个基于 JavaScript 的开源可视化图表库。
详细内容参考官网。echarts 中文网。
Font Awesome
以下是参考资料。
以下是 4.7.0 快速入门参考，以 vite 集成示例。
1. 复制 font-awesome 目录到 vite-project 项目的 src/assets/font-awesome/
2. 在 vite-project/index.html 模块中编写
<link rel="stylesheet" href="src/assets/font-awesome/css/font-awesome.min.css">
3. 配置图标示例，更多配置参考官方案例
<i class="fa fa-camera-retro"></i> fa-camera-retro
iconfont
以下是阿里的 iconfont 参考资料。
以下是 iconfont 素材准备步骤。
1. 在首页选择 [资源管理] -> [我的图标] -> [我的项目]。
2. 新建项目，配置全部选择默认的即可。
3. 添加图标。找图标 -> 添加到购物车 -> 添加到项目。
4. 找到我的项目，可以对图标进行编辑，如：大小、旋转、颜色等操作。
以下是 vue 使用 iconfont 素材步骤。
1. 在我的项目里面，点击下载到本地。链接引入不稳定，因此不描述链接引入步骤，链接引入理解比较适合开发场景。
2. 解压缩包，拷贝需要的文件，如将 iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2 文件拷贝至 src/assets/iconfont/
3. 在 vite-project/index.html 模块中编写
<link rel="stylesheet" href="src/assets/iconfont/iconfont.css">
4. 配置图标示例
<i class="iconfont icon-cangchucangku"></i>icon-cangchucangku
uni-app 引入稍有不一样，有需要时再补充下处理逻辑。
Axios
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。以下是参考资料。
Axios 大致的内容就是如下。
- 支持 Get、POST、PUT 等请求。
- POST 请求等时，表单转 JSON、表单数据提交等细节逻辑。
更细分一下，其实就是 HTTP 调用的相关知识了，即请求头、响应体、默认配置、拦截器等相关内容。
tailwindcss
tailwindcss，结合了 PostCSS 使用的
Pinia
Pinia 即 vue 的存储库，详见如下资料。
以下步骤是 Pinia 的快速上手示例。
1. 安装 pinia
- 安装。即
yarn add pinia。 - main.ts 中添加如下代码
import { createPinia } from 'pinia'
// 对应官网的 app.use(createPinia()) 步骤
createApp(App).use(createPinia()).mount('#app')
2. 定义 store
新增 stores/piniaObjectType.ts。
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return {
count: 0,
}
},
getters: {
doubleCount: (state) => {
return state.count * 2;
}
},
actions: {
increment(a: number) {
this.count += a
}
}
})
新增 stores/piniaFuncType.ts。
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const useNameStore = defineStore('name', () => {
const name = ref('tom');
function setName(newName: string) {
name.value = newName;
}
return {
name,
setName
}
});
3. 使用 store
在 App.vue 中添加如下 ts 代码。
<script setup lang="ts">
import { useCounterStore } from './stores/piniaObjectType';
import { useNameStore } from './stores/piniaFuncType'
// 第一个store: count
const store = useCounterStore();
function countPlus() {
store.increment(1);
}
// 第二个store: name
const name1 = useNameStore();
function updateName1() {
name1.setName('jerry1' + Math.random())
}
</script>
继续在 App.vue 中添加如下模板代码。
<template>
<div>
<h2>{{store.count}}</h2>
<button @click="countPlus">countPlus</button>
<hr>
<h2>{{ name1.name }}</h2>
<button @click="updateName1">updateName1</button>
</div>
</template>
启动服务，进入页面点击按钮即可看到效果。
4. 响应式使用 store
在 App.vue 中添加如下 ts 代码，通过 Vue.js devtools 工具查看变量数据，上面示例代码为非响应式的。
注意响应式使用时，方法和变量要分别解构。
import { storeToRefs } from 'pinia'
const nameStore = useNameStore();
const { setName } = nameStore;
const { name } = storeToRefs(useNameStore());
console.log('name', name)
WEB 开发脚手架
vue-element-admin
安装步骤如下。
$ git clone https://gitee.com/panjiachen/vue-element-admin.git
$ cd vue-element-admin/
$ git config --global url."https://github.com/nhn/raphael.git".insteadOf ssh://git@github.com/nhn/raphael.git
$ git config --global url."https://github.com/adobe-webplatform/eve.git".insteadOf ssh://git@github.com/adobe-webplatform/eve.git
$ git config --global url."https://github.com/sohee-lee7/Squire.git".insteadOf ssh://git@github.com/sohee-lee7/Squire.git
$ git config --global url."https://".insteadOf git://
$ npm install --registry=https://registry.npm.taobao.org
$ npm run dev
前端项目 0->1 开发
一步步完成一个完整的前端项目。
1. vue3 脚手架初始化
VSCode 和 Node.js 已安装好，具体安装此处不描述。
使用命令行安装好 vuecli 工具，命令如下。
# 如果有老版本的 vuecli，先执行下面命令卸载老版本的 vuecli。
$ npm uninstall -g vue-cli
# 全局安装 vuecli(3 以上版本)
$ npm install -g @vue/cli
# 验证
C:\Users\SHJ>node -v
v14.20.1
C:\Users\SHJ>npm -v
6.14.17
C:\Users\SHJ>vue -V
@vue/cli 5.0.8
新建 psysui 应用。
使用 $ vue create psysui，psysui 是项目名。
点击回车后出现下面的选项：
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
选择第 4个，即自定义创建。
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
继续，其它略，最终结果如下。
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
启动
$ cd first
$ yarn serve