• vue(32) : win10创建vue2基础前端框架

    • vue2
    • element-ui
    • axios

    含接口调用示例

    1.创建vue2项目

    开发工具为HBuilderX 3.7.3

    1.1.新建项目

    1.2.普通项目-vue项目(2.6.10)

    等待创建项目

    2.安装element-ui组件

    2.1右键左下角开始图标

     2.2.cd进入项目目录,执行安装element-ui

    npm i element-ui -S

    2.3.main.js引入配置

    1. import {
    2.   Pagination,
    3.   Dialog,
    4.   Autocomplete,
    5.   Dropdown,
    6.   DropdownMenu,
    7.   DropdownItem,
    8.   Menu,
    9.   Submenu,
    10.   MenuItem,
    11.   MenuItemGroup,
    12.   Input,
    13.   InputNumber,
    14.   Radio,
    15.   RadioGroup,
    16.   RadioButton,
    17.   Checkbox,
    18.   CheckboxButton,
    19.   CheckboxGroup,
    20.   Switch,
    21.   Select,
    22.   Option,
    23.   OptionGroup,
    24.   Button,
    25.   ButtonGroup,
    26.   Table,
    27.   TableColumn,
    28.   DatePicker,
    29.   TimeSelect,
    30.   TimePicker,
    31.   Popover,
    32.   Tooltip,
    33.   Breadcrumb,
    34.   BreadcrumbItem,
    35.   Form,
    36.   FormItem,
    37.   Tabs,
    38.   TabPane,
    39.   Tag,
    40.   Tree,
    41.   Alert,
    42.   Slider,
    43.   Icon,
    44.   Row,
    45.   Col,
    46.   Upload,
    47.   Progress,
    48.   Spinner,
    49.   Badge,
    50.   Card,
    51.   Rate,
    52.   Steps,
    53.   Step,
    54.   Carousel,
    55.   CarouselItem,
    56.   Collapse,
    57.   CollapseItem,
    58.   Cascader,
    59.   ColorPicker,
    60.   Transfer,
    61.   Container,
    62.   Header,
    63.   Aside,
    64.   Main,
    65.   Footer,
    66.   Timeline,
    67.   TimelineItem,
    68.   Link,
    69.   Divider,
    70.   Image,
    71.   Calendar,
    72.   Backtop,
    73.   PageHeader,
    74.   CascaderPanel,
    75.   Loading,
    76.   MessageBox,
    77.   Message,
    78.   Notification
    79. } from 'element-ui';
    80.  
    81. Vue.use(Pagination);
    82. Vue.use(Dialog);
    83. Vue.use(Autocomplete);
    84. Vue.use(Dropdown);
    85. Vue.use(DropdownMenu);
    86. Vue.use(DropdownItem);
    87. Vue.use(Menu);
    88. Vue.use(Submenu);
    89. Vue.use(MenuItem);
    90. Vue.use(MenuItemGroup);
    91. Vue.use(Input);
    92. Vue.use(InputNumber);
    93. Vue.use(Radio);
    94. Vue.use(RadioGroup);
    95. Vue.use(RadioButton);
    96. Vue.use(Checkbox);
    97. Vue.use(CheckboxButton);
    98. Vue.use(CheckboxGroup);
    99. Vue.use(Switch);
    100. Vue.use(Select);
    101. Vue.use(Option);
    102. Vue.use(OptionGroup);
    103. Vue.use(Button);
    104. Vue.use(ButtonGroup);
    105. Vue.use(Table);
    106. Vue.use(TableColumn);
    107. Vue.use(DatePicker);
    108. Vue.use(TimeSelect);
    109. Vue.use(TimePicker);
    110. Vue.use(Popover);
    111. Vue.use(Tooltip);
    112. Vue.use(Breadcrumb);
    113. Vue.use(BreadcrumbItem);
    114. Vue.use(Form);
    115. Vue.use(FormItem);
    116. Vue.use(Tabs);
    117. Vue.use(TabPane);
    118. Vue.use(Tag);
    119. Vue.use(Tree);
    120. Vue.use(Alert);
    121. Vue.use(Slider);
    122. Vue.use(Icon);
    123. Vue.use(Row);
    124. Vue.use(Col);
    125. Vue.use(Upload);
    126. Vue.use(Progress);
    127. Vue.use(Spinner);
    128. Vue.use(Badge);
    129. Vue.use(Card);
    130. Vue.use(Rate);
    131. Vue.use(Steps);
    132. Vue.use(Step);
    133. Vue.use(Carousel);
    134. Vue.use(CarouselItem);
    135. Vue.use(Collapse);
    136. Vue.use(CollapseItem);
    137. Vue.use(Cascader);
    138. Vue.use(ColorPicker);
    139. Vue.use(Transfer);
    140. Vue.use(Container);
    141. Vue.use(Header);
    142. Vue.use(Aside);
    143. Vue.use(Main);
    144. Vue.use(Footer);
    145. Vue.use(Timeline);
    146. Vue.use(TimelineItem);
    147. Vue.use(Link);
    148. Vue.use(Divider);
    149. Vue.use(Image);
    150. Vue.use(Calendar);
    151. Vue.use(Backtop);
    152. Vue.use(PageHeader);
    153. Vue.use(CascaderPanel);
    154.  
    155. Vue.use(Loading.directive);
    156.  
    157.  
    158. import axios from 'axios';
    159.  
    160. Vue.prototype.$loading = Loading.service;
    161. Vue.prototype.$msgbox = MessageBox;
    162. Vue.prototype.$alert = MessageBox.alert;
    163. Vue.prototype.$confirm = MessageBox.confirm;
    164. Vue.prototype.$prompt = MessageBox.prompt;
    165. Vue.prototype.$notify = Notification;
    166. Vue.prototype.$message = Message;
    167. import 'element-ui/lib/theme-chalk/index.css';

    3.安装axios

    3.1.npm安装axios

    npm install --save axios

    3.2.项目根目录创建[vue.config.js]文件, 内容如下

    1. 'use strict'
    2. const path = require('path')
    3.  
    4. function resolve(dir) {
    5.   return path.join(__dirname, dir)
    6. }
    7.  
    8. const port = process.env.port || process.env.npm_config_port || 9527 // dev port
    9. const name =  '测试' // page title
    10.  
    11. // All configuration item explanations can be find in https://cli.vuejs.org/config/
    12. module.exports = {
    13.   /**
    14.    * You will need to set publicPath if you plan to deploy your site under a sub path,
    15.    * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
    16.    * then publicPath should be set to "/bar/".
    17.    * In most cases please use '/' !!!
    18.    * Detail: https://cli.vuejs.org/config/#publicpath
    19.    */
    20.   publicPath: '/',
    21.   outputDir: 'dist',
    22.   assetsDir: 'static',
    23.   lintOnSave: process.env.NODE_ENV === 'development',
    24.   productionSourceMap: false,
    25.   devServer: {
    26.     port: port,
    27.     open: true,
    28.     overlay: {
    29.       warnings: false,
    30.       errors: true
    31.     },
    32.     proxy: {
    33.       // 代理test开头的uri
    34.       '/test': {
    35.         target: 'http://127.0.0.1:33001', // 后端地址
    36.         // target: 'localhost:8080/manage', // 原始地址
    37.         changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
    38.         pathRewrite: {
    39.           '^/test': 'test'
    40.         }
    41.       }
    42.     }
    43.     //before: require('./mock/mock-server.js')
    44.   },
    45.   configureWebpack: {
    46.     // provide the app's title in webpack's name field, so that
    47.     // it can be accessed in index.html to inject the correct title.
    48.     name: name,
    49.     resolve: {
    50.       alias: {
    51.         '@': resolve('src')
    52.       }
    53.     }
    54.   },
    55.   chainWebpack(config) {
    56.     // it can improve the speed of the first screen, it is recommended to turn on preload
    57.     // it can improve the speed of the first screen, it is recommended to turn on preload
    58.     config.plugin('preload').tap(() => [
    59.       {
    60.         rel: 'preload',
    61.         // to ignore runtime.js
    62.         // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
    63.         fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
    64.         include: 'initial'
    65.       }
    66.     ])
    67.  
    68.     // when there are many pages, it will cause too many meaningless requests
    69.     config.plugins.delete('prefetch')
    70.  
    71.     // set svg-sprite-loader
    72.     config.module
    73.       .rule('svg')
    74.       .exclude.add(resolve('src/icons'))
    75.       .end()
    76.     config.module
    77.       .rule('icons')
    78.       .test(/\.svg$/)
    79.       .include.add(resolve('src/icons'))
    80.       .end()
    81.       .use('svg-sprite-loader')
    82.       .loader('svg-sprite-loader')
    83.       .options({
    84.         symbolId: 'icon-[name]'
    85.       })
    86.       .end()
    87.   }
    88. }

    代理后端配置如下, 三个test改成相同的uri前缀即可, uri该签注会代理到后端

    proxy: {
          // 代理test开头的uri
          '/test': {
            target: 'http://192.168.1.1:8080', // 后端地址
            changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
            pathRewrite: {
              '^/test': '/test'
            }
          }
        }

     3.3.src下创建util目录, util文件夹下创建request.js, 内容如下

    const res = response.data

    这个需要根据后端接口格式修改

    1. /*引入axios*/
    2. import axios from 'axios'
    3. import {
    4. 	MessageBox,
    5. 	Message
    6. } from 'element-ui'
    7.  
    8. const request = axios.create({
    9. 	baseURL: '', // 基础路径,将统一的部分全部封装
    10. 	withCredentials: true // 表示请求可以携带cookie
    11. })
    12.  
    13. axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    14.  
    15.  
    16. // response interceptor
    17. request.interceptors.response.use(
    18. 	/**
    19. 	 * If you want to get http information such as headers or status
    20. 	 * Please return  response => response
    21. 	 */
    22.  
    23. 	/**
    24. 	 * Determine the request status by custom code
    25. 	 * Here is just an example
    26. 	 * You can also judge the status by HTTP Status Code
    27. 	 */
    28. 	response => {
    29. 		const res = response.data
    30. 		// if the custom code is not 20000, it is judged as an error.
    31. 		if (res.errCode !== 0) {
    32. 			Message({
    33. 				message: res.errMessage || 'Error',
    34. 				type: 'error',
    35. 				duration: 3 * 1000
    36. 			})
    37. 			// return Promise.reject(new Error(res.message || 'Error'))
    38. 			return null
    39. 		} else {
    40. 			return res
    41. 		}
    42. 	},
    43. 	error => {
    44. 		console.log('err' + error) // for debug
    45. 		Message({
    46. 			message: error.message,
    47. 			type: 'error',
    48. 			duration: 5 * 1000
    49. 		})
    50. 		return Promise.reject(error)
    51. 	}
    52. )
    53.  
    54.  
    55. //前端采用export.default，在写后端代码时用module.export
    56. export default request

    4.创建测试调用http

    4.1.src下创建api目录, api下创建test.js, 内容如下

    1. import request from '@/util/request'
    2.  
    3.  
    4. export function test() {
    5.   return request({
    6.     url: '/test/2',
    7.     method: 'get'
    8.   })
    9. }

    4.2. App.vue替换

    2.  
    4.

    4.3.后台接口需要返回以下内容

    接口地址为 ： http://127.0.0.1:33001/test/2

    1.     @GetMapping("/test/2")
    2.     public Object test2() {
    3.         Map res = new HashMap<>();
    4.         res.put("code", 200);
    5.         res.put("errCode", 0);
    6.         res.put("errMessage", "测试错误");
    7.         res.put("msg", "SUCCESS");
    8.         return res;
    9.     }

    内容如下

    {
    "msg": "SUCCESS",
    "code": 200,
    "errCode": 0,
    "errMessage": "测试错误"
    } 

    5.启动

    npm run serve

    6.编译

    npm run build

    7.部署

    dist里面的文件放到nginx目录下

    nginx.conf添加以下配置

    1. 		location /test {
    2.             proxy_pass http://127.0.0.1:33001;
    3.             proxy_set_header   X-Forwarded-Proto $scheme;
    4.             proxy_set_header   Host              $http_host;
    5.             proxy_set_header   X-Real-IP         $remote_addr;
    6.         }

    可以参考 ：VUE(5) : vue-element-admin[5] : 打包及nginx部署_使用nginx部署vue-element-admin项目-CSDN博客

  • 相关阅读:
    双目项目实战---测距（获取三维坐标和深度信息）
    NLP模型笔记2022-18：GCN/GNN模型在nlp中的使用【论文+源码】
    交换排序详讲：冒泡排序+快速排序（多方法+思路+图解+代码）
    Android Aidl跨进程通讯(四)--接口回调，服务端向客户端发送数据
    暴力递归转动态规划（九）
    即时通讯开发之Netty的退出机制和原理
    机器学习笔记 - Ocr识别中的文本检测EAST网络概述
    浅谈虚拟地址转换成物理地址（值得收藏）
    华为机试 - 处理器问题
    记一次bat执行报：‘xxx’不是内部或外部命令，也不是可运行的程序或批处理文件。
  • 原文地址：https://blog.csdn.net/Lxinccode/article/details/134171791