网站模板安装网站后期的维护

当前位置： 首页 > news >正文

网站模板安装,网站后期的维护,食品经营许可证,网页首页设计模板免费vue2element-uiaxios 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引入配置 import {Paginat… vue2element-uiaxios 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引入配置 import {Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Slider,Icon,Row,Col,Upload,Progress,Spinner,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Timeline,TimelineItem,Link,Divider,Image,Calendar,Backtop,PageHeader,CascaderPanel,Loading,MessageBox,Message,Notification } from element-ui;Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use(Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Input); Vue.use(InputNumber); Vue.use(Radio); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Checkbox); Vue.use(CheckboxButton); Vue.use(CheckboxGroup); Vue.use(Switch); Vue.use(Select); Vue.use(Option); Vue.use(OptionGroup); Vue.use(Button); Vue.use(ButtonGroup); Vue.use(Table); Vue.use(TableColumn); Vue.use(DatePicker); Vue.use(TimeSelect); Vue.use(TimePicker); Vue.use(Popover); Vue.use(Tooltip); Vue.use(Breadcrumb); Vue.use(BreadcrumbItem); Vue.use(Form); Vue.use(FormItem); Vue.use(Tabs); Vue.use(TabPane); Vue.use(Tag); Vue.use(Tree); Vue.use(Alert); Vue.use(Slider); Vue.use(Icon); Vue.use(Row); Vue.use(Col); Vue.use(Upload); Vue.use(Progress); Vue.use(Spinner); Vue.use(Badge); Vue.use(Card); Vue.use(Rate); Vue.use(Steps); Vue.use(Step); Vue.use(Carousel); Vue.use(CarouselItem); Vue.use(Collapse); Vue.use(CollapseItem); Vue.use(Cascader); Vue.use(ColorPicker); Vue.use(Transfer); Vue.use(Container); Vue.use(Header); Vue.use(Aside); Vue.use(Main); Vue.use(Footer); Vue.use(Timeline); Vue.use(TimelineItem); Vue.use(Link); Vue.use(Divider); Vue.use(Image); Vue.use(Calendar); Vue.use(Backtop); Vue.use(PageHeader); Vue.use(CascaderPanel);Vue.use(Loading.directive);import axios from axios;Vue.prototype.\(loading Loading.service; Vue.prototype.\)msgbox MessageBox; Vue.prototype.\(alert MessageBox.alert; Vue.prototype.\)confirm MessageBox.confirm; Vue.prototype.\(prompt MessageBox.prompt; Vue.prototype.\)notify Notification; Vue.prototype.\(message Message; import element-ui/lib/theme-chalk/index.css; 3.安装axios 3.1.npm安装axios npm install --save axios 3.2.项目根目录创建[vue.config.js]文件, 内容如下 use strict const path require(path)function resolve(dir) {return path.join(__dirname, dir) }const port process.env.port || process.env.npm_config_port || 9527 // dev port const name 测试 // page title// All configuration item explanations can be find in https://cli.vuejs.org/config/ module.exports {/*** You will need to set publicPath if you plan to deploy your site under a sub path,* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,* then publicPath should be set to /bar/.* In most cases please use / !!!* Detail: https://cli.vuejs.org/config/#publicpath*/publicPath: /,outputDir: dist,assetsDir: static,lintOnSave: process.env.NODE_ENV development,productionSourceMap: false,devServer: {port: port,open: true,overlay: {warnings: false,errors: true},proxy: {// 代理test开头的uri/test: {target: http://192.168.1.1:8080, // 后端地址// target: localhost:8080/manage, // 原始地址changeOrigin: true, // 开启代理在本地创建一个虚拟服务端pathRewrite: {^/test: /test}}}//before: require(./mock/mock-server.js)},configureWebpack: {// provide the apps title in webpacks name field, so that// it can be accessed in index.html to inject the correct title.name: name,resolve: {alias: {: resolve(src)}}},chainWebpack(config) {// it can improve the speed of the first screen, it is recommended to turn on preload// it can improve the speed of the first screen, it is recommended to turn on preloadconfig.plugin(preload).tap(() [{rel: preload,// to ignore runtime.js// https://github.com/vuejs/vue-cli/blob/dev/packages/vue/cli-service/lib/config/app.js#L171fileBlacklist: [/\.map\)/, /hot-update.js\(/, /runtime\..*\.js\)/],include: initial}])// when there are many pages, it will cause too many meaningless requestsconfig.plugins.delete(prefetch)// set svg-sprite-loaderconfig.module.rule(svg).exclude.add(resolve(src/icons)).end()config.module.rule(icons).test(/.svg\(/).include.add(resolve(src/icons)).end().use(svg-sprite-loader).loader(svg-sprite-loader).options({symbolId: icon-[name]}).end()config.when(process.env.NODE_ENV ! development,config {config.plugin(ScriptExtHtmlWebpackPlugin).after(html).use(script-ext-html-webpack-plugin, [{// runtime must same as runtimeChunk name. default is runtimeinline: /runtime\..*\.js\)/}]).end()config.optimization.splitChunks({chunks: all,cacheGroups: {libs: {name: chunk-libs,test: /[\/]node_modules[\/]/,priority: 10,chunks: initial // only package third parties that are initially dependent},elementUI: {name: chunk-elementUI, // split elementUI into a single packagepriority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or apptest: /[\/]nodemodules[\/]?element-ui(.*)/ // in order to adapt to cnpm},commons: {name: chunk-commons,test: resolve(src/components), // can customize your rulesminChunks: 3, // minimum common numberpriority: 5,reuseExistingChunk: true}}})// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunkconfig.optimization.runtimeChunk(single)})} } 代理后端配置如下, 三个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 这个需要根据后端接口格式修改 /引入axios/ import axios from axios import { MessageBox, Message } from element-uiconst request axios.create({baseURL: , // 基础路径,将统一的部分全部封装withCredentials: true // 表示请求可以携带cookie })axios.defaults.headers[Content-Type] application/x-www-form-urlencoded// response interceptor request.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return response response//** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response {const res response.data// if the custom code is not 20000, it is judged as an error.if (res.code ! 0) {Message({message: res.message || Error,type: error,duration: 3 * 1000})// return Promise.reject(new Error(res.message || Error))return null} else {return res}},error {console.log(err error) // for debugMessage({message: error.message,type: error,duration: 5 * 1000})return Promise.reject(error)} )//前端采用export.default在写后端代码时用module.export export default request 4.创建测试调用http 4.1.src下创建api目录, api下创建test.js, 内容如下 import request from /util/requestexport function add(data) {return request({url: /my-boke,headers: { Content-Type: application/json },method: post,data}) }export function update(data) {return request({url: /my-boke,headers: { Content-Type: application/json },method: put,data}) }export function del(data) {return request({url: /my-boke,method: delete,params: data}) }export function env() {return request({url: /fsa/env,method: get}) } 4.2. vue.js调用http template/templatescriptimport {add,update,del,env} from /api/fsaexport default {name: app,data() {return {}},created() {this.t1()},methods: {t1() {env().then(response {console.log(response)})}}} /scriptstyle#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;} /style5.启动 npm run serve 6.编译 报错, 待解决