一、準備工作
1.安裝node.js
1.1npm指令詳解
- -g: 全局
- --save:保存
- --dev:開發(fā)環(huán)境
使用國內的淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安裝webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用。
npm install webpack -g
3、安裝 vue-cli
安裝 vue 腳手架項目初始化工具 vue
npm install vue-cli -g
二、初始化項目
1.創(chuàng)建一個項目
D:\project_vue>vue init webpack myEle
示例圖
目錄結構
myEle\
├─ build\
│ ├─ build.js
│ ├─ check-versions.js
│ ├─ logo.png
│ ├─ utils.js
│ ├─ vue-loader.conf.js
│ ├─ webpack.base.conf.js
│ ├─ webpack.dev.conf.js
│ └─ webpack.prod.conf.js
├─ config\ --配置目錄
│ ├─ dev.env.js
│ ├─ index.js
│ └─ prod.env.js
├─ src\
│ ├─ assets\
│ │ └─ logo.png
│ ├─ components\ --自定義組件
│ │ └─ HelloWorld.vue
│ ├─ router\ --vue-router 路由配置
│ │ └─ index.js
│ ├─ App.vue --應用入口
│ └─ main.js --主入口js
├─ static\
│ └─ .gitkeep
├─ .babelrc
├─ .editorconfig
├─ .gitignore
├─ .postcssrc.js
├─ index.html
├─ package-lock.json
├─ package.json --模塊包,cnpm i安裝node_modulues
└─ README.md
2.安裝必要的模板組件
2.1安裝vuex
應用狀態(tài)管理庫
cnpm install vuex --save
2.2安裝axios
axios 是一個基于 Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，我們后續(xù)需要用來發(fā)送 http 請求
cnpm install axios --save
2.3安裝mockjs
為了模擬后臺接口提供頁面需要的數(shù)據(jù)，我們引入 Mock.js 為我們提供模擬數(shù)據(jù)，而不用依賴于后臺接口的完成。
cnpm install mockjs --save-dev
2.4安裝 SCSS
入門教程:傳送門
cnpm install sass-loader node-sass --save-dev
2.4.1添加配置
在build文件夾下的webpack.base.conf.js的 rules 標簽下添加配置。
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
2.4.2如何使用
在頁面代碼 style 標簽中把 lang 設置成 scss 即可
<style lang="scss">
</style>
2.5安裝element-ui
npm i element-ui -S
安裝完后會在根目錄的package.json下看到這些模塊依賴
"dependencies": {
"axios": "^0.18.0",
"element-ui": "^2.4.11",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
...
"mockjs": "^1.0.1-beta3",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
...
}
三、開始整合
1.整合Element-UI
項目導入
按照安裝指南，在 main.js 中引入 element，引入之后，main.js 內容如下：
mian
然后隨便去Element-UI官網復制個按鈕過來
tpl
啟動npm start,效果圖如下,成功
html
2.頁面路由
2.1添加頁面
pages
2.2添加路由
route
本人的host為：http://localhost:8080/#/
- 訪問路徑
- fu:{host}/fu
- me:{host}/me
- ck:{host}/ck
3.利用Mock模擬請求
3.1添加mock
在src目錄下新建目錄mock并創(chuàng)建文件
mock
3.2模擬請求
mock-axios
模擬成功
mock-getmenu
<font color=#DC143C>注意:</font>
1.Mock并沒有發(fā)起真正的http請求,所以你在發(fā)起axios請求是必須的uri格式
//必須加上http://localhost:8080 不然會報錯
axios.get('http://localhost:8080/menu.json').then(res=>{
alert(JSON.stringify(res.data));
});
2.盡量使用ES6的新特性,例如axios中的Promise.所以后續(xù)的變量與常量盡量使用
let與const,并使用箭頭函數(shù)=>
這個教程我覺得很好:你需要了解的 ES6 語法
當然你也可以去看詳細點的:阮一峰Es6教程
