Vue3项目完整开发流程

飞天的小蜗牛

2867人浏览 · 2022-11-01 11:30:46

飞天的小蜗牛 · 2022-11-01 11:30:46 发布

一、开发流程思维导图
开发流程思维导图
二、前期准备
1、安装Nodejs
1）nodejs下载地址，下载并安装
2）确认已安装了node.js，可在cmd中输入( node -v和npm -v），如显示出版号，说明安装成功
image.png
2、搭建Vue项目（vue-cli和vite，2选1）
1）搭建第一个vue-cli项目
npm install -g @vue/cli //全局安装vue-cli
# OR
yarn global add @vue/cli

vue --version //查看版本
vue create hello-world //创建一个项目
创建项目过程

项目文件

官方文档：https://cli.vuejs.org/zh/guide/installation.html
系统默认安装的vue、vue-router、vuex都不是最新版本，需要手动卸载重新安装
2）搭建第一个 Vite 项目
npm init vite@latest
创建项目过程

项目文件

官方文档：https://cn.vitejs.dev
三、启动项目
1、vue-cli
npm run serve
2、vite
npm install //安装依赖
npm run dev //启动项目
四、安装常用的依赖
npm install vue@next //最新版vue v3.x
npm install vue-router@4 //最新版vue-router v4.x
npm install vuex@next --save //最新版vuex v4.x
npm install axios //基于promise 的HTTP 库
npm install element-plus //基于最新版Vue 3.x的PC端UI框架
npm install ant-design-vue --save //基于最新版Vue 3.x的PC端UI框架
npm install vant@3 //基于最新版Vue 3.x的移动端UI框架
npm install loadsh //JavaScript 的实用工具库
npm install immutable //数据处理工具
npm install dayjs //时间日期库
npm install qrcode //二维码生成器
npm install echarts //可视化图表库
npm install gsap //动画库
npm install xlsx file-saver //导出表格
npm install mockjs //生成随机数据，拦截 Ajax 请求
npm install eslint --save-dev //可组装的JavaScript和JSX检查工具
npm install sass sass-loader //CSS扩展语言
npm install vuedraggable //基于Sortable.js实现的vue拖拽插件
npm install sortablejs //拖拽库
npm install screenfull //实现全屏功能
npm install nprogress //加载进度条
npm install jszip //创建、读取和编辑 .zip 文件
npm install js-cookie //cookie存取
npm install fuse.js //模糊搜索
npm install dropzone //提供文件拖拽上传并且提供图片预览的开源类库
npm install driver.js //页面分步引导
npm install core-js //JavaScript标准库的 polyfill（垫片/补丁）
npm install codemirror //浏览器实现的多功能文本编辑器
npm install clipboard //文本复制到剪贴板
vue v3.x：https://v3.cn.vuejs.org
vue-router v4.x：https://next.router.vuejs.org/zh/installation.html
vuex v4.x：https://next.vuex.vuejs.org/zh/index.html
element-plus：https://element-plus.gitee.io/zh-CN
ant-design-vue：https://next.antdv.com/docs/vue/getting-started-cn
vant：https://youzan.github.io/vant/v3/#/zh-CN
lodash：https://www.lodashjs.com
immutable：https://immutable-js.com
dayjs：https://dayjs.gitee.io/zh-CN
echarts：https://echarts.apache.org/zh/index.html
gsap：https://greensock.com/gsap
mockjs：http://mockjs.com
sass：https://www.sass.hk

五、项目目录详解及各文件规范
1、前端开发规范文档：https://www.jianshu.com/p/f9900596d50b
2、项目目录详解
项目目录详解
六、项目必备知识
1、HTML
HTML5：https://www.runoob.com/html/html5-intro.html

2、JavaScript
ES6 入门教程：https://es6.ruanyifeng.com/

3、CSS
Flex布局：https://www.jianshu.com/p/acfbb1b7d0f6

4、Vue
Vue3官方文档：https://v3.cn.vuejs.org/api

七、项目开发
1、与设计师对接：PS、蓝湖、PxCode、2345看图王
2、代码管理工具git、svn
1）git常用命令
初始化仓库： git init
远程拉取项目：git clone 地址
状态：git status
添加：git add .
提交：git commit -m " "
推送：git push
查看远程仓库：git remote -v
推到master上：git push origin master
创建新的分支(分支名：dev）：git checkout -b dev
新建分支合并到master：git checkout master git marge dev git push origin master
删除分支：git branch -D dev
远程删除分支：git push origin :dev
退回到上一个版本：git reset --hard head^
查看日志：git log 或者 git reflog

打开Git Bash，配置用户名和邮箱地址，输入命令
git config --global user.name "用户名"
git config --global user.email "邮箱"
Git教程：https://www.liaoxuefeng.com/wiki/896043488029600

3、开发工具vscode
1）安装扩展：Vetur、Volar、Prettier、ESlint
2）settings.json配置
{
// 使用vscode-icons主题
"workbench.iconTheme": "vscode-icons",
// 每次保存的时候将代码按格式进行修复
// "editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.validate": ["javascript", "javascriptreact", "vue"],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 默认使用prettier格式化支持的文件
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatterOptions": {
"prettier": {
// 结尾无分号
"semi": false,
// 超过140个字符换行
"printWidth": 140,
// 使用单引号
"singleQuote": true,
// 无尾随逗号
"trailingComma": "none",
// 箭头函数单个参数不加分号
"arrowParens": "avoid"
},
"prettyhtml": {
"printWidth": 140
}
},
// 同上prettier格式化代码
"prettier.semi": false,
"prettier.printWidth": 140,
"prettier.trailingComma": "none",
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
// 指定wxml的格式化
"minapp-vscode.wxmlFormatter": "prettyHtml",
"minapp-vscode.disableAutoConfig": true,
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"eslint.trace.server": null
}
4、vue-router、vuex、axios、mockjs使用
1）vue-router
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
}，
{ // 设置404页面
path: '/:catchAll(.*)',
name: '404',
component: () => import('@/views/404.vue')
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'

createApp(App).use(store).use(router).mount('#app')

在vue.config.js中添加@对应的映射

'use strict'

const port = process.env.port || process.env.npm_config_port || 9527 // dev port

const path = require('path')
const name = 'my-vue-demos' // page title

function resolve(dir) {
return path.join(__dirname, dir)
}

module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// before: require('./mock/mock-server.js')
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
}
}
在vite.config.js中添加@对应的映射

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, "src") //设置别名
}
},
server: {
host: 'localhost',
port: 8080,
open: true,
},
})
vue-router v4.x官方文档：https://next.router.vuejs.org/zh/guide

2）vuex
在store文件夹下，创建index.js，并写入

import { createStore } from 'vuex'
import user from '@/store/modules/user'

export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
user
}
})
在store文件夹下新建modules文件夹，并新建user.js,写入：

const state = {
count: 0
}

const mutations = {
increment (state) {
state.count++
}
}

const actions = {}

export default {
namespaced: true,
state,
mutations,
actions,
}
在页面中使用：

<template>
<div class="home">
<div>第一次获取store的值counts:{{counts}}</div>
<div>动态获取store的值count:{{count}}</div>
<button @click="increment">点我+1</button>
</div>
</template>

export default {
name: 'Home',
components: {
},
setup() {
const store = useStore()
let data = reactive({
counts: store.state.user.count
})
const increment = () => {
store.commit('user/increment')
}
const count = computed(() => {
return store.state.user.count
})

return {
...toRefs(data),
increment,
count
}
}
}
</script>
vuex v4.x官方文档：https://next.vuex.vuejs.org/zh

3）axios
vue下axios封装：https://www.jianshu.com/p/729d439d3fc0

4）mock
方法1、使用fastmock
fastmock：https://fastmock.site/#
mockjs：http://mockjs.com
image.png

方法2、封装mockjs
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#mockjs
5、Vue.js devtools使用
谷歌浏览器扩展中添加Vue.js devtools，方便vue开发调试

Vue.js devtools
6、改Bug，打断点
在 VS Code 中调试：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

7、打包上线部署
npm run build

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^