一、创建vue项目
前两步操作，详见之前vue方面的博客
1. 安装node.js
2. 安装vue脚手架
3. vue create 项目名字
- 选择自定义配置
- 选择安装 Babel、Router、Vuex 三项
- ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) ==》 y
- 选择 In package.json
# 是否保存本次设置，如果输入y，需要输入一个名字记录这次的配置，下次创建项目时可以直接使用
- ? Save this as a preset for future projects? (y/N)
二、在pycharm环境下开发vue项目
需要安装vue.js插件
步骤：
file ---> Settings ---> Plugins ---> install(在左下方) ---> 搜索 vue.js ---> 下载安装 ---> 安装完成重启 pycharm 即可
运行 vue 项目
Edit Configrations ---> + 号 ---> npm ---> Scripts =》 serve
三、Vue 项目目录结构：
- node_modules:项目依赖(以后项目要传到git上,这个不能传)
- publish--->index.html 是总页面
- src :项目
- assets:静态资源
- components:组件
- views:视图组件
- APP.vue:根组件
- main.js :总的入口js
- router.js :路由相关,所有路由的配置,在这里面
- store.js :vuex状态管理器
- package.json:项目的依赖,npm install 是根据它来安装依赖的
基本组件三大组成部分：
<template>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
新建组件步骤：
- 创建一个组件
- 去路由做配置
import Course from './views/Course.vue'
{
path: '/course',
name: 'course',
component: Course
}
- 使用：在根组件中
<router-link to="/course">专题课程</router-link>
显示数据:
# script中:
export default {
data:function () {
return{
course:['python','linux'],
aa:'我是aa'
}
}
方法绑定:
<button @click="init">点我</button>
# script中
methods: {
init: function () {
alert('111')
}
}
vue中的ajax：-------axios
安装：
npm install axios
使用：
// 先在 main 中配置： 将 axios 配置成全局属性
import axios from 'axios'
Vue.prototype.$http=axios
// 在组件中 this.$http.request().then().catch()
this.$http.request({
url:'请求的地址',
method:'请求方式',
}).then(function(response){
....函数回调处理
})
注意:
this需要在上面重新赋值给一个变量
请求成功函数内部:
_this.course = response.data
