本文为个人原创,项目练手用的,一点点更新,具体源码地址有需要可查看:项目源码
1) 第一天记录
全局安装 vue-cli脚手架:
vue install vue-cli -g
使用vue2命令创建项目
vue init webpack in-ele-vue //创建项目文件
进入项目,安装webpack
mikdir in-ele-vue //创建文件夹
cd in-ele-vue //进入文件
vue init webpack //安装webpack
安装package.json中项目安装包 (使用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org
)
npm install
运行项目
npm run dev
扫描二维码关注公众号,回复: 12783715 查看本文章
在阿里巴巴矢量图标库选择自己需要的图标库http://www.iconfont.cn
,下载下来
在index.html文件中引入
<link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">
1) 第二天记录
npm install axios --save //安装axios
切换国内镜像下载node-sass 命令 npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install sass-loader node-sass -D //安装sass 其中sass-loader依赖于node-sass
npm i element-ui -S ///安装ElementUi,i是指install简写
npm install babel-plugin-component -D //借助 babel-plugin-component,可以只引入需要的组件,以达到减小项目体积的目的
在build/webpack.base.config.js中添加:rules中加入,
{
test: /.scss$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
可以把端口号进行修改,默认的是http://localhost:8080
,在config文件夹中的index.找到port,改成port: 8088,就会变成http://localhost:8088
在src下新建文件夹views,用于后期页面编写
打开build文件夹下的webpack.prod.conf.js和webpack.dev.conf.js文件,增加自己喜欢的ico图标,我把图标放在了src文件夹下的assets中
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: './src/assets/favicon.ico', //webpack.prod.conf.js中加入
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: './src/assets/favicon.ico' //webpack.dev.conf.js
}),
在components文件夹中写2个组件,因为要做下面这种布局,将就看看,因为用的md写的,没有插入图片:
Aside | Header |
Main |
- topMenu.vue为上面的组件
- leftMenu.vue为左侧的组件
在HelloWorld.vue中引入
import leftmenu from "../components/leftMenu"
import topmenu from "../components/topMenu"
声明组件:
components:{
leftmenu,
topmenu
},
使用组件,我命名就是leftmenu,所以可以以为标签使用,就会出现,里面的内容可以看看通用的模板大致长什么样
3) 第3天记录
- 配个代理:(这里我使用的是聚合数据,免费的接口,后期看哪里会有免费的登录接口来完善我们的项目,)
proxyTable: {
‘/api’: {
target: ‘http://v.juhe.cn’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
在main.js中引入axios,
import axios from 'axios'
将其挂载到vue原型上,方便请求接口使用
Vue.prototype.$axios = axios
在src下新建JK文件夹,我整了两个名字,一个是科四,一个科一,选择不同的驾照类型切换不同考题
提前用postman测好接口,我选的是驾考题的数据,大家可以自行查找