vue

您所在的位置：网站首页 › 用webpack搭建一个vue项目 › vue

vue

2024-07-12 17:37| 来源: 网络整理| 查看: 265

vue2,从新建到打包上线，完整搭建一个vue-cli项目

发现当我重新开发一个项目的时候，偶尔会忘记某些步骤，所以做个整理便于以后查看！

项目开始的时候当然是做技术选型，还有用什么框架啊，插件啊，都先设计好，这样在开发过程中也不会太曲折！在这里插入图片描述项目搭建的过程，在本文中划分为6个部分

一，新建vue项目（vue-cli） 1，搭建环境：

安装node，安装全局vue，安装vue-cli

npm install --global vue-cli

检查安装是否成功在这里插入图片描述

2，新建：

因为个人习惯这里用vue2来举例，新建一个文件夹，进入到文件夹，命令行输入

vue init webpack my-project

如下图所示：安装在这里插入图片描述进入项目：

cd my-project

启动项目：

npm run dev

浏览器打开：在这里插入图片描述这时候项目就新建完成啦～可以开始进行创作附加：vue项目目录讲解

二，基础配置

最常用的是esline配置，这里先用这个举例。我们可能会遇到esline报错在这里插入图片描述如果在一开始新建项目的时候没有禁用esline ,开发的时候觉得esline太过麻烦，那我们可以选择禁用esline 1，禁用方法：（1），注释掉下面代码（2），重启编辑器，再运行项目，报的警告就消失了

2，配置方式：当然，你需要用到esline，也可以根据自己的需求进行配置；在文件.eslintrc.js文件中添加rules,这里就不细说，之后有机会再整理出这部分。 esline网站： https://cn.eslint.org/docs/user-guide/configuring

三、第三方包的引用

这里采用举例说明，毕竟包包太多了哈哈举例说明：Element ui的引用 1，安装：

npm i element-ui -S 安装成功后我们可以在package.json的依赖包里面看到，我们安装的包（默认都是最新版）

注：如果想安装指定的版本号，可以直接在package.json上写上版本号，然后 npm install 在这里插入图片描述 2，引用：在main.js 里面引入，如下图所示，注意，样式文件需要单独引入可以开始在页面使用啦 element UI 地址：https://element.eleme.cn/#/zh-CN/component/quickstart

四，路由配置

我们这里用vue-router，可以在新建项目的时候，就默认配置啦，也可以后期在package.json->dependencies 里面添加 “vue-router”: “^3.0.1” 然后 npm install 1，引入vue-router 在这里插入图片描述 2，配置路由如下图所示，在文件夹 router 里面 index.js文件里面配置路由参数： path：路径（绝对路径） name:：路由名称 component：关联的组件 3，在.vue 文件里面应用可以用path或是name来实现路由跳转,并且可以在跳转的时候带上参数params

myclick() { // this.$router.push({ path: "/HelloWorld" }); this.$router.push({ name: 'HelloWorld', params: { userId: '123' }}) }

在目标组件接收，可以看到参数被传过来了，可以在页面调用

export default { name: 'HelloWorld', data () { return { msg: 'hello world' } }, mounted() { console.log(this.$route,'helloworld路由') }, }

在这里插入图片描述

五，api的封装

1，导入

npm install axios

2，新建一个文件夹request，建一个文件request.js 和 api.js 我们在request.js 做一个全局请求封装，在api.js 放要请求的方法，这样便于统一管理在这里插入图片描述 request.js 在文件里面引用 axios；请求拦截，响应拦截，暴露封装好的方法 instance 给全局使用；这里直接上代码，解说写在注释里面了；

import axios from "axios" import router from '../router/index' // 提示方法（自己写） let open1 = msg => { this.$message({ showClose: true, message: msg, type: 'error' }); } //跳转登录页方法 const toLogin = () => { // 做一个判断如果在登录页就不重复调用 if (router.currentRoute.fullPath != '/login') { router.replace({ path: '/login' }); } } /** * 请求失败后的错误统一处理，这里可以根据项目的错误处理需求来分情况，如果是除了status：200，所有错误一致处理的情况，可以省略这个方法 * @param {Number} status 请求失败的状态码 */ const errorHandle = (status, others) => { // 状态码判断 switch (status) { // 401: 未登录状态，跳转登录页 case 401: open1('请登录'); toLogin(); break; case 403: open1('登录过期，请重新登录'); setTimeout(() => { toLogin(); }, 1000); break; // 404请求不存在 case 404: open1('请求不存在'); break; default: console.log(others); } } /** * 请求成功处理，主要拦截 code 不等于 200 的情况 * @param {*} res 是请求成功的数据 */ function filterResponse(res) { switch (res.data.code) { // 请求成功 case 200: return Promise.resolve(res); break; case 401: console.log('登录过期', res); toLogin(); return Promise.reject(res); break; default: break; } } ------------重点重点重点------------ //1、创建axios实例 var instance = axios.create(); instance.defaults.timeout = 2500; // 带上请求身份凭证cookie(解决跨域的时候没有携带cookie的问题) instance.defaults.withCredentials = true // 2、请求拦截器 instance.interceptors.request.use(function(config){ //发送请求前做些什么 return config; },function(error) { // 对请求错误做些什么 return Promise.reject(error); }) // 3、请求响应拦截器 instance.interceptors.response.use( // 请求成功 res => res.status === 200 ? filterResponse(res) : Promise.reject(res), // 请求失败 error => { const { response } = error; if (response) { // 请求已发出，失败 errorHandle(response.status, response.data.message); return Promise.reject(response); } }) export default instance;

api.js 里面引入 request，分不同环境，不同请求类型做封装，暴露出可以直接调用的方法，例如 loginIn

/**** app.js ****/ // 导入封装好的axios实例 import request from './request' import qs from 'qs'; // 不同环境的切换 let base = ''; if (process.env.NODE_ENV == 'development') {// 开发 base = 'http://172.11.11.11:8800'; } else if (process.env.NODE_ENV == 'debug') { base = 'https://172.11.11.11:8800'; } else if (process.env.NODE_ENV == 'production') {// 线上环境 base = 'https://xxx.co'; } let contentType1 = 'application/x-www-form-urlencoded'; let contentType2 = 'application/json'; /** *分装适合不同请求类型的方法 * @param method 请求类型 * @param url 请求地址 * @param params 请求参数 * @param header 请求头 */ function Request(method, url, params, header) { url = `${base}` + url; header = { 'Content-Type': header || 'application/json' }; let config = {}; switch (method) { case 'get': config = { method: method, url: url, headers: header } if(params) config.params = params return request(config) case 'delete': config = { method: method, url: url, headers: header } if(params) config.params = params return request(config) case 'post': config = { method: method, url: url, headers: header } if(params) config.data = JSON.stringify(params) return request(config) case 'put': config = { method: method, url: url, headers: header } if(params) config.data = qs.stringify(params) return request(config) } } export default { // 调用封装好的方法，把不同的请求暴露出去 loginIn(params) { return toRequest('post', '/api/v1/login', params, contentType1) }, loginOut(params) { return toRequest('post', '/api/v1/logout', params, contentType1) }, }

这里面的，put ，post，patch这几个请求方法都要用“data”作为请求主体发送数据，不能用params 发送URL参数

最后在 vue 文件里面引入，调用

import api from "../request/api"; export default { data() { return { username: "", password: "", checked: true }; }, mounted() {}, methods: { Login() { api .loginIn({ username: this.username, password: this.password }) .then(res => { console.log(res,'登录成功') this.$router.push({ path: "/qqqq", name: "投放数据", params: { username: res.data.data.username } }); }) .catch(err => { console.log(err, "失败"); }); } } }; 六，打包

查看package.json的“scripts”看打包命令是什么，默认一般都是npm run build 在打包之前，我们要把环境切换成正式环境，静态文件的路径也要配置喔。在config文件夹里面的index.js里面配置（主要是配置assetsPublicPath，静态资源路径和 productionSourceMap 源码不可见）

build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), //打包的文件名 assetsSubDirectory: 'static', //静态文件的文件名 assetsPublicPath: '静态资源路径', /** * Source Maps */ //如果我们不想源码在打包后仍然可见，把 productSourceMap改为false即可 productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }

最后运行打包命令：npm run build

～到这里简单的项目就完成啦啦啦～觉得有帮助的话麻烦留个赞哩👍

【本文地址】

vue

vue

今日新闻

推荐新闻