vue項目建立完整版

-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 是根據它來安裝依賴的