-vue项目创建
-装上node.js
-装vue脚手架
-vue create 项目名
-ide:前端开发,webstorm,pychram,idea,goland,php
-用pycharm跑vue的项目
-
-目录介绍
项目名:
-node_modules 项目依赖包()
-public
-index.html vue项目都是单页面开发
-facicon.ico 图标文件
-src 项目目录
-assets 存放静态文件
-components 组件(小组件)
-views 页面组件
-App.vue 根组件
-main.js 项目的入口
-router.js 路由关系
-store.js Vuex存放数据
-package.json 项目依赖的第三方模块
-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:html相关,style:样式 ,script:js代码
先在vue项目中setting设置里Plugins中安装vue插件
-创建组件
-创建一个course.vue
-配置路由:route.js中
import Course from './views/Course.vue'
{
path: '/course',
name: 'course',
component:Course
}
-<router-link to="/course">免费课程</router-link> 实现路由跳转
-显示数据
-在script中:
data:function () {
return{
courses:['python','linux','java'],
}
}
-在template中就可以使用retrun的变量
-{{courses}}
-用v-for显示数据
<ul>
<li v-for="course in courses">{{course}}</li>
</ul>
-与后台交互
-axios vue的ajax
-安装 npm install axios
-<button @click="init">点我</button> 让button跟init方法绑定
- methods: {
init: function () {
// 向后台发送请求,加载数据
alert(1)
},
}
-axios的使用
-安装 npm install axios
-main.js加上以下两句
//导入axios
import axios from 'axios'
//相当于放到全局变量中
Vue.prototype.$http=axios
-在组件中使用(script中,一般在方法中写)
-this.$http.request({
url:请求的地址,
method:请求方式
}).then(function(response){
//请求成功会回调该匿名函数
//取实际返回的值response.data中取
}).catch(function (error) {
//请求出现错误,回调该方法
})
-element-ui
-安装 npm i element-ui -S
-使用:
1 在main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2 从官网上copy代码,粘贴,修改
-图片绑定
//item是js中的一个变量
<img :src="item" >
-路飞后台
创建vue项目:
-安装node.js
-vue脚手架
-vue create 项目名字
pycharm开发vue项目
-需要安装vue.js插件
-setting--->plugins--->左下方install---->去搜索---->下载--->重启
-运行vue项目
-editconfigration--->+--->npm--->run 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 是根据它来安装依赖的