準備工作
環境依賴:Node.js; vue官方腳手架: vue-cli;
具體怎麼安裝nodejs和vue-cli的部分就不再具體說明了,請查看官方文檔按步驟執行即可(安裝nodejs會安裝npm(包管理工具),vue-cli依賴npm來安裝,注意這個先後關係)。
背景知識
vue.js核心 框架
webpack 打包工具,使用vue-cli初始化項目的時候,我們選擇webpack作為我們的模塊打包工具
開始動手
初始化項目,選擇webpack作為打包工具,項目名稱是my-project,然後按照提示進行一些配置,過程中可以選擇使用vue-router(推薦使用);這些配置最終會寫到項目的package.json中和安裝相應的模塊
vue init webpack my-project
复制代码
接下來使用自己熟悉的編輯器打開項目,目錄結構大致是這樣的
構建和配置目錄:webpack打包的相關配置文件
src目錄:我們最終編寫業務代碼的地方
static目錄:我也不知道幹嘛用的
package.json
package.json是項目最基礎的配置文件。可以發現裡面的很多內容,例如名稱,作者,描述等就是剛才初始化項目時我們填充的值; dependencies和devDependencies是項目依賴的包,運行項目之前需要先執行npm install來安裝項目所依賴的包
npm install复制代码
然後我們來重點關註一下scripts
npm允許在package.json
文件裡面,使用scripts
分區定義腳本命令。其中dev和start都是啟動本地開發環境的,lint是做語法校正的,build是打包最終在線代碼的
{
"name": "my-project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "ideagay <[email protected]>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {...},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
复制代码
為了統一團隊內的代碼風格,我們一般會選擇一些語法校驗插件來實現代碼風格的統一。這裡我們選擇eslint作為我們的代碼檢查插件。首先我們來改一下eslint(語法校驗)的相關配置, :根目錄下的.eslintrc.js,在規則下面加一個結尾分號的配置,強制末尾要加分號,養成好習慣;然後把src下面所有文件裡的代碼所在分號的補全,不然編譯會不通過;其他風格根據習慣自己配置吧。
"semi": [
2,
"always"
]复制代码
運行項目看下效果
:命令行工具,在當前目錄下執行以下命令,一切順利的話,會自動打開在瀏覽器上打開localhost:8080
# 默认8080端口
npm run dev
# 也可以指定端口
PORT=8090 npm run dev复制代码
添加業務代碼
src目錄是我們主要編寫業務代碼的地方,可參考以下目錄結構配置
資產js,css,圖片等資源目錄
組件公共組件目錄
路由器vue-router配置目錄
views頁面組件目錄
main.js程序主入口,一般在這裡添加插件,如吐司,裝載等,可自己編寫或使用第三方,如ui
App.vue根組件
main.js
import Vue from 'vue';
import App from './App';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';
Vue.config.productionTip = false;
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});复制代码
路由
往router / index.js裡添加首頁的配置
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/index';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
});复制代码
網絡請求
網絡請求可以使用axios,然後根據業務再進行一些封裝
資產/js/api/ajax.js
import axios from 'axios';
var qs = require('qs');
var instance = axios.create({
baseURL: 'http://xxx.com/',
timeout: 20000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
const ajax = (url, params) => {
return new Promise((resolve, reject) => {
instance({
url: url,
method: 'post',
data: qs.stringify(params)
}).then(res => {
console.log(res);
if (res.data.success === true) {
resolve(res.data.data);
} else {
throw res;
}
}).catch(err => {
console.error(err);
reject(err);
})
})
};
export default ajax;复制代码
import Ajax from '@/assets/js/api/ajax.js';
Ajax(`/tui/search`, {
'key': this.keyword
}).then(res => {
console.log(res);
});
复制代码
樣式
使用normalize.css重置基礎樣式,消除不同瀏覽器間的差異,在根組件App.vue中約會就好了
<script>
import 'normalize.css';
export default {
name: 'App'
}
</script>复制代码
現在一般業務所需的框架已經基本建造完成。
作者:ideagay
链接:https://juejin.im/post/5a7c18d36fb9a0633e51c458
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。