使用vue开发后台管理系统详细步骤
2022-08-03 09:57:03
207
{{single.collect_count}}

使用vue开发后台管理系统详细步骤

1## 前期准备
浏览器插件
Vue.js devtools
VS Code插件
自动补全标签
Auto Close Tag
Auto Complete Tag
Auto Rename Tag

开启一个服务器浏览HTML网页,第一次使用需要Ctrl + Shift + p输入 live server选择open
Live Server

路径自动补全
Path Intellisense

vue语法高亮和自动补全代码
Vetur
VueHelper

Vs Code设置
文件—>首选项—>设置,然后添加如下代码:

“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
},
“emmet.includeLanguages”: {
“vue-html”: “html”,
“vue”: “html”
}

开始项目

vue-cli是官方的一个脚手架工具,所谓脚手架呢就是一个架子,什么架子呢?项目结构的架子,里面有一些最基本的结构配置。利用vue-cli呢,我们可以生成这样的一个脚手架,所以呢它就被称为vue脚手架工具。

npm install vue-cli@2.9.6 -g 下载工具

vue init webpack admin 通过上面的工具下载模板,此处的admin为项目名称

element-ui
安装:npm i element-ui -S

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}