vue入门——2正式进入开发-蒲公英云

vue入门——2正式进入开发

一、初始了解

初始项目生产的App.vue文件，即一个vue的单文件组件，由三部分组成：

template写html代码；
script写js代码；
style写样式。

也可写成独立的js或者css文件引入。

开发时只需要保存文件便能在浏览器中实时看到修改变化。该vue文件通过VueLoader插件加载执行。之后再结合webpack打包会将Vue转换成浏览器识别的Html文件。

可在浏览器安装vue开发者工具，便于调试vue应用。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 1

二、进入开发

在src下创建自己的目录，并自定义创建vue单文件，在App.vue中进行嵌套。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 2

嵌套步骤：1、用import引入自定义的单文件组件，2、并在data()后注册引入的单文件组件，3、再在template中插入自定义的组件的伪标签。

这样对于多处使用到的页面模块可实现组件化开发。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 3

三、Vue-router路由搭建单页应用。

再创建一个名为welcome.vue的单文件组件，配置一个路由。router-link在浏览器中会被解析为a标签。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 4

路由配置，index.js中：先引入welcome组件，再在路由对象中增加路由记录。

其中path属性是地址栏中的展示路径，component是组件名。实际开发中一个页面认为是一个大的组件。路由可实现基本的跳转及页面间传参等。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 5

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 6

四、异步请求axios插件

异步请求既可以用jQuery的ajax，也可以用axios插件。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 7

安装别的插件的时候可以直接在main.js中引用，并用vue.use方法注册。但axios并不是vue插件，所以不能使用vue.use注册，只能在每一个发送请求的组件中引用。为了解决这个问题，我们在引用axios之后，通过修改原型链来方便使用，具体实现如下图，在main.js中添加两行代码，便可以在组件的methods方法中直接使用$http命令，如下下下图。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 8