vue实践从无到有的渣渣学习之路

本文为个人原创，项目练手用的，一点点更新，具体源码地址有需要可查看：项目源码

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测好接口，我选的是驾考题的数据，大家可以自行查找
在这里插入图片描述

在这里插入图片描述