1. 程式人生 > >vue項目環境搭建

vue項目環境搭建

mailto 環境搭建 clas with return 如何使用 data unit them

安裝node.js

$ npm install -g vue-cli
$ vue init webpack my-project

?Project name
?Project description
?Author
?Use ESLint to lint your code?(y/n)
?Setup unit test with Karma + Mocha?(y/n)
?Setup e2e tests with Nightwatch?(y/n)

第一行問你項目名稱,輸入 my-first-vue-project
第二行問你項目描述,輸入 this is my vue
第三行問作者的名字,輸入 你自己的名字就好
第四、五、六行都直接在後面輸入 NO 。

$ cd my-project
$ npm install
$ npm run dev

===element ui=====
npm i element-ui -S

import Vue from ‘vue‘;
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
import App from ‘./App.vue‘;

Vue.use(ElementUI);

new Vue({
el: ‘#app‘,
render: h => h(App)
});

===mint ui=========

Vue 1.x

npm install mint-ui@1 -S

Vue 2.0

npm install mint-ui -S

// 引入全部組件
import Vue from ‘vue‘;
import Mint from ‘mint-ui‘;
Vue.use(Mint);

=============================================================
? Target directory exists. Continue? Yes
? Project name my-project-element-ui
? Project description A Vue.js project
? Author yancy777 [email protected]
? Vue build standalone

? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recommended) npm

++++++++++++++++++++++++++++++++++++++++++++++++++++
vue-cli 引入axios及跨域使用:https://www.jianshu.com/p/e36956dc78b8;
vue-axios :https://www.npmjs.com/package/vue-axios
Axios 中文說明:https://www.kancloud.cn/yunye/axios/234845

vue2.0如何使用axios
main.js:

import axios from ‘axios‘
Vue.prototype.$http = axios
其他地方使用的話 如同使用 vue-resource 一樣

this.$http.get(URL).then(response => {
// success callback
}, response => {
// error callback
})

1.對於get請求
axios.get(‘/user‘, {
params:{
name:"virus"
}
})
2.對於post請求
axios.post(‘/user‘,{
name:"virus"
})
3、 一次性並發多個請求

function getUserAccount(){
return axios.get(‘/user/12345‘);
}
function getUserPermissions(){
return axios.get(‘/user/12345/permissions‘);
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//當這兩個請求都完成的時候會觸發這個函數,兩個參數分別代表返回的結果
}))
4.axios可以通過配置(config)來發送請求

//發送一個POST請求
axios({
method:"POST",
url:‘/user/1111‘,
data:{
name:"virus"
}
});

vue項目環境搭建