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

女爷i 2022-12-22 14:27 140阅读 0赞

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

### 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

在阿里巴巴矢量图标库选择自己需要的图标库`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写的，没有插入图片：

<table> 
 <tbody> 
  <tr> 
   <td> Aside</td> 
   <td>Header</td> 
  </tr> 
  <tr> 
   <td>Main</td> 
  </tr> 
 </tbody> 
</table>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 3]

[Link 1]: https://gitee.com/wangye123456/in-ele-vue
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201201180419299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201201180248128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020120118031766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201202124620109.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2,size_16,color_FFFFFF,t_70