VUE的深坑（一）

不念不忘少年蓝@ 2022-09-01 13:59 178阅读 0赞

## 框架的下载 ##

[vue框架下载][vue]  
在使用vue之前必须先下载node.js。不然依赖包都是下载不了的。

## 先了解目录结构 ##

![在这里插入图片描述][b233ed7491244172a35a979541e6a8ef.jpg]

目录结构是必须先掌握的，不同的版本对应的不同的目录结构，不过都是大同小异的。还不太了解可以去[菜鸟教程][Link 1]查看。  
我个人的目录是少了一些配置文件的，所以之后还需要再添加进去。

## 运行 ##

一般运行命令都是下面这个，如果需要修改的话可以找到package.json中"scripts"修改

npm run serve

## Vue的基础操作 ##

> 写代码的地方都是在src这个目录中

1.  我们需要全局引包的话可以在main.js中将第三方包通过代码引入

引入
    import axios from 'axios';
    通过挂载在原型上，以后在任何的页面里面都可以使用变量$axios进行使用
    Vue.prototype.$axios = axios;

2.vue的主体框架都是App.vue这个文件。这个文件写的代码基本上是组件的名字。需要用组件就先引入之后再使用就可以了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw_size_16_color_FFFFFF_t_70]

1.  Vue的组件都装在了components这个大文件中，你可以在这个文件继续新建文件夹来标识不同的组件，只不过通过import引入的时候要写完整路径。

> 基本的使用就是  
> 1.先下载框架  
> 2.build  
> 3.编写组件赢并引用。

[vue]: https://cn.vuejs.org/
[b233ed7491244172a35a979541e6a8ef.jpg]: /images/20220829/22aca2b0e32b44faa453584840714a47.png
[Link 1]: https://www.runoob.com/vue2/vue-directory-structure.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvcmszMw_size_16_color_FFFFFF_t_70]: /images/20220829/9d8032c6f7794933af1890dfc94139e1.png