文章內，圖片很多，占據了一定的篇幅。有寫后台的哥們說，vue怎么寫，怎么新建一個vue項目，然后我想了想，覺得寫一個面向后台同學的vue教程也是有必要，文章中幾乎沒講css和vue細節處理的相關內容，減少接受不必要的信息量，降低vue的學習成本。如果有不清楚的地方，可以私信聯系我，有不對不合理之處，敬請指出！我是邇伶貳！
安裝vue-cli 腳手架
1. 安裝nodejs環境
- 下載地址： (nodejs)[https://nodejs.org/zh-cn/download/]
- 安裝(略)
2. 安裝vue-cli系列工具
- npm install -g @vue/cli
- npm install -g @vue/cli-service-global
3. vue create hello-world // 用vue 初始化hello-world 項目
3.1 vue create hello-world
3.2 跑起項目 npm run serve
很多后端同學的用的編輯器是 idea, 我這里也用idea演示這個,細節之處不是本文的重點，可查看 idea創建vue項目
打開剛才初始化后的項目
配置啟動腳本，相對於配置java 的腳本要簡單的多
啟動：
訪問地址
3.3 項目目錄介紹：
- node_modules , 項目依賴的模塊包，我們需要的模塊包都會下載到這個目錄下，我們開發時不用管
- public 靜態文件放的位置，放一下大的靜態文件
- src 項目的源文件
- assets 小的靜態文件
- components 組件，一些公用的組件，比如登錄框，輸入組件等
- APP.vue vue項目的根組件
- main.js 項目的主入口文件，一些需要的基本的js css 可在這里引入
- package.json 項目依賴、介紹、基本配置等的清單文件，我們只需要看，scripts 里面的執行命令即可， 比如serve ->啟動， build -> 構建打包
- 其他 項目運行配置文件，可忽略
Tips：上面的內容了解即可，可不用深入，繼續往下添加頁面路由
4. 增加路由vue-router
4.1 安裝路由 npm install vue-router -S
使用
4.2 在項目文件夾下新建router.js
4.3 寫入代碼
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
Vue.use(Router);
export default new Router({
mode:'history',
routes: [
{
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
}
]
})
4.4. 新建page文件夾，文件夾下面的都是為頁面 .vue文件
4.5 修改router.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
import Index from './page/index';
import List from './page/list';
Vue.use(Router);
export default new Router({
mode:'history',
routes: [
{
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/index',
name: 'Index',
component: Index
},
{
path: '/list',
name: 'List',
component: List
},
]
})
4.6 修改入口main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router';
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
訪問路由：
5. 增加axios， http請求庫 (https://www.kancloud.cn/yunye/axios/234845)
5.1 安裝庫 axios , npm install axios -S
5.2 使用
以上面的list.vue 文件為例：
<template>
<div>
<h3>這是一個list 頁面</h3>
<ul>
<li>
<router-link to="/index">Index</router-link>
</li>
</ul>
<h3>下面是axios請求到到數據</h3>
<ul v-if="userList.length">
<li v-for="item in userList" :key="item.id">
姓名：{{item.name}}
</li>
</ul>
<ul v-if="!userList.length">
loading....
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "Index",
data(){
return {
userList: []
}
},
created () {
axios('http://localhost:4000/get/alluser')
.then(res => {
this.userList = res.data.users;
})
}
}
</script>
<style scoped>
ul li {
list-style: none;
font-size: 16px;
}
</style>
6. 增加腳手架可配置文件 vue.config.js
設置接口的跨域，vue-cli 啟動的服務端口等
module.exports = {
devServer: {
port: 8090,
proxy: 'http://localhost:4000'
}
}
7. 打包項目
7.1 執行命令 npm run build
7.2 構建結果
會在項目目錄下生成dist 文件夾，文件夾下的文件就是我們需要的靜態文件
我們把打包后的靜態文件扔進服務器即可，或者我們用ngxix 部署靜態文件，index.html 就是最終指向的入口文件。
關於nginx的部署，需要的話可以參考： nginx會多少
10. 補充，使用第三方ui庫
關於vue 實際操作可以參考我這篇筆記，在不定時更新中 (vue的實際應用)[https://www.cnblogs.com/adouwt/p/7911639.html]
整理不容易，轉載請注明出處，我是邇伶貳，謝謝閱讀！