一、准备工作
1.安装node.js
1.1npm指令详解
- -g: 全局
- --save:保存
- --dev:开发环境
使用国内的淘宝镜像
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.创建一个项目
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
应用状态管理库
cnpm install vuex --save
2.2安装axios
axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，我们后续需要用来发送 http 请求
cnpm install axios --save
2.3安装mockjs
为了模拟后台接口提供页面需要的数据，我们引入 Mock.js 为我们提供模拟数据，而不用依赖于后台接口的完成。
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并创建文件
mock
3.2模拟请求
mock-axios
模拟成功
mock-getmenu
<font color=#DC143C>注意:</font>
1.Mock并没有发起真正的http请求,所以你在发起axios请求是必须的uri格式
//必须加上http://localhost:8080 不然会报错
axios.get('http://localhost:8080/menu.json').then(res=>{
alert(JSON.stringify(res.data));
});
2.尽量使用ES6的新特性,例如axios中的Promise.所以后续的变量与常量尽量使用
let与const,并使用箭头函数=>
这个教程我觉得很好:你需要了解的 ES6 语法
当然你也可以去看详细点的:阮一峰Es6教程
网友评论