vue建立

一.vue項目安裝

1.安裝node,npm

2.安裝vue-cli腳手架

cnpm install vue-cli -g 或 npm install -g @vue/cli-init

3.初始化項目

vue init webpack .(.表明當前位置，name建立項目)

4.安裝各類依賴

npm install

5.運行項目

npm run dev

自動打開瀏覽器

config→index.js→autoOpenBrowser：true;18行，端口下

二.vue項目結構

build： 項目構建(webpack)相關代碼

config： 配置目錄，包括端口號等。能夠使用默認的

node_modules：npm 加載的項目依賴模塊

src：本身寫的開發項目

static：靜態資源目錄，如圖片、字體等

.babelrc：關於es6的一些配置

.editorconfig：編輯器的一些配置

.gitignore：git這個版本控制工具忽略的文件

.postcssrc.js：定義瀏覽器前綴

index.html：項目的入口

package.json：項目配置文件。

README.md：項目的說明文檔，markdown 格式

 

*src源碼目錄

src/assets：放置一些圖片，如logo等

src/components：存放開發的組件

src/router：路由的配置信息

src/app.vue：項目入口文件，咱們也能夠直接將組件寫這裏，而不使用 components 目錄。

src/main.js： 項目的核心文件

三.路由

1.建立組件

2.引入組件 import ... from ""//導入

3.註冊組件

export default new Router({

routes: [{

path: '/',

name: 'HelloWorld',

component: HelloWorld,

children:[{

path:'world',

component:world

},{

path:'girl',

component:girl

}]

}]

})

5.export default//導出

6.new Vue{//new一個實例

el:'',//掛載點

router,//使用路由

components: { App },//使用的根組件

template: '<App/>'

 

}

7.定義路由的跳轉連接

<router-link active-class="類名" tag="顯示標籤" to="跳轉位置"></router-link>

8.路由激活後組建顯示的位置

<router-view></router-view>

組件優化（懶加載）

export default new Router({
  mode:"history",//去除地址中的#
  routes: [
    {path:'/',redirect:"/route"},//重定向
    {path: '/home',component:resolve=>{require(['@/page/home'],resolve)}},
    {path: '/route',component:resolve=>{require(['@/page/route'],resolve)},
      children:[
        {path:'/route',redirect:"/route/child"},//重定向
        {path:'par/:id/:bg',component:resolve=>{require(['@/page/router/paramk'],resolve)}},
        {path:'child',component:resolve=>{require(['@/page/router/child'],resolve)}}
      ]
    }
  ]
})

 

 

四.axios

1.安裝axios

npm install --save axios

2.在入口main.js中導入axios 並將axios寫入vue的原型，這樣就能更簡單的使用。

import axios from 'axios'

import Qs from 'qs'

//QS是axios庫中帶的，不須要咱們再npm安裝一個

Vue.prototype.axios = axios;

Vue.prototype.qs = Qs;

Ps:Qs這個庫是幫助咱們解決上面的那個坑的,建議使用...

3.在項目裏愉快的使用axios啦

this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

.then(function(res){

console.log(res.data)

//控制檯打印請求成功時返回的數據

//bind(this)能夠不用

}.bind(this))

.catch(function(err){

if(err.response) {

console.log(err.response)

//控制檯打印錯誤返回的內容

}

//bind(this)能夠不用

}.bind(this)