1天上手vue-pc端后台管理项目

﹏ヽ暗。殇╰゛Y 2023-05-29 05:05 9阅读 0赞

### 文章目录 ###

*  目录结构
 *  vue文件语法
 *  下载HBuilderX编译器专业编写vue
 *  去\[菜鸟学习demo，快速入门\](https://www.runoob.com/vue2/vue-start.html)
 *  开源后台管理项目:vue-element-admin
 *   *  安装

# 目录结构 #

*  [vue 文件目录结构详解][vue]
 *  vue-cli 3.X以后项目结构就变了，比如:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzIwMjA4_size_16_color_FFFFFF_t_70]  
    public代替了之前的static，config已经被移除了。

# [vue文件语法][vue 1] #

问了同事，补充如下内容:

1.  如同body顶级只能有一个。
2.  components 的内容要和import一致，否则vue无法识别

# 下载HBuilderX编译器专业编写vue #

# 去[菜鸟学习demo，快速入门][demo] #

> 先别去官网看，太浪费时间了。这里就看3个小时就行了。

# [开源后台管理项目:vue-element-admin][vue-element-admin] #

> 最好快速看完作者这博客，了解作者的经历。  
> 知道他的选型，思考的反向，1小时。

## 安装 ##

> 如果失败就执行以下指令

*  `npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass`
 *  `npm install`

[vue]: https://www.cnblogs.com/dragonir/p/8711761.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzIwMjA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104112116306.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzIwMjA4,size_16,color_FFFFFF,t_70
[vue 1]: https://blog.csdn.net/qq_36838191/article/details/80413977
[demo]: https://www.runoob.com/vue2/vue-start.html
[vue-element-admin]: https://panjiachen.github.io/vue-element-admin-site/zh/