从零开始用webpack+vue+vuex 搭建前端工程的基本过程

最新推荐文章于 2022-08-10 23:41:28 发布
最新推荐文章于 2022-08-10 23:41:28 发布
阅读量586 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43787528/article/details/87917500
版权

1、下载node

https://nodejs.org/en/download/

2、开始安装

 npm install -g webpack      //安装webpack

在这里插入图片描述

  npm install -g vue-cli         //安装vue-cli   也叫vue脚手架

在这里插入图片描述

3、 进入目标目录，执行vue init webpack myVueDome在这里插入图片描述

进入目标目录

npm install    //安装依赖
npm run dev   //启动项目

在这里插入图片描述

在这里插入图片描述

在浏览器输入http://localhost:8080

在这里插入图片描述

4、项目文件结构

在这里插入图片描述

5、src目录

在这里插入图片描述

6、分别看下app.vue和main.js两个重要文件

app.vue
app.vuemian.vue
在这里插入图片描述

leying20
关注
从零开始用vue+webpack+vuex实现一个发布查询信息类网站，（1）创建项目
weixin_42360556的博客
11-13 376
重构了自己写的第一版的项目之后的总结 从零开始做一个vue项目。 第一步，环境搭建 1）node.js的安装 首先下载好node，https://nodejs.org/zh-cn/， vue需要借助node的npm安装各种依赖 下载之后安装node.js，由于没有 看文档之类的遇到了俩坑，需要注意的 第一点： 我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放......
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8840
未完
webpack中配置vuex
sinat_36227086的博客
08-24 383
1.cnpm install vuex --save 我在配置的时候由于没有安装，所以出现无法resolve vuex的错误。 2.如果里面涉及到ES6语法，则需安装bable 里面可能会用到module.exports={ … }，则需安装bable，推荐文章：安装babel 其中会出现问题， （1）Cannot find module ‘@babel/core’ babel-loader@8 requires Babel 7.x (the package '@babel/c， 百度一下有博客说原因是：
webpack+vue+vueRouter+vuex 项目demo（附截图、代码、入门篇）
SunShinessx的博客
02-11 595
本项目主要复习vue+webpack+vue-router+vuex的基础知识。学习后有一个总体概念，详细内容看官网。 >开始（确认已经安装node环境和npm包管理工具） 1、新建项目文件名为demo 2、npm init -y 初始化项目 >安装项目依赖 3、npm install --save vue 默认安装最新版vue 4、npm install --save...
webpack 修改title_webpack多页应用环境搭建
weixin_39976960的博客
11-25 88
下面这篇东西，分享的是我如何对「商城」前端进行改版。当然改版的版本还没上线，我开始写这个东西是因为厦门的夏天出门实在太难熬。只好待在家里听歌. 看股票.翻文档......这是一个真实项目升级的过程，也许目前搭建的架构还不完美，不妨分享出来大家看看......2017年6月中旬接到了任务，对现有「商城」前端进行升级，升级目标是：(1)、整站实现pc端、pad端、移动端的响应式。(2)、「商城流程」上...
初始化webpack+vue+axios+vue-router+vuex前端项目
前端专栏
06-18 463
项目地址： https://github.com/Lee-Xin/initVue 项目结构： 说明 webpack打包部分，仅供参考。重点是vue+axios+vue-router+vuex这四个部分
基于vite+vuex+vue-router+vant3.0的h5应用框架，开箱即用
06-21
【标题】: "基于vite+vuex+vue-...这个框架旨在让开发者能够快速启动一个新的H5项目，无需从零开始配置复杂的构建环境和依赖关系，从而提高开发效率。在实际使用时，开发者可以在此基础上根据项目需求进行扩展和定制。
云E办Springboot+vue——前端项目完整版（含源码）
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
从零搭建一个vite+vue3+ts规范基础项目
qq_41559229的博客
05-27 1635
最简单的vite+vue+ts的配置，虽简单但详细！
一个vue2.0+vuex+vue-router搭建的单页潮流购物网站
前端说
02-12 7748
项目demo地址 github源码地址首页如果觉得不错，给github源码点个赞吧QAQ前言这篇文章是总结自己写项目时的思路，遇到的问题，和学到的东西，本文只截取一部分来讲，源码已奉上，觉得项目还行的点个赞吧，谢谢一、搭建环境 安装vue-clinpm install -g vue-cli 创建webpack项目 vue init webpack vogue cd vogue 安装依赖npm i
从零开始用vue+webpack+vuex实现一个发布查询信息类网站，（3）api接口管理
weixin_42360556的博客
11-15 347
接口的统一管理 先扔个axios文档地址：https://www.kancloud.cn/yunye/axios/234845 写到注册登录时候需要用到axios了，项目重构之前计划着用把所有的接口统一管理。 1）文件结构，在src下 apiconfig.js 和api 为同级，前者写axios的配置 首先要在main.js中注册引用 import api from './api/api/ind...
vuex webpack 配置_Vuex? 和 TypeScript 的 Webpack4.+ 尝鲜
weixin_39609650的博客
01-12 125
静态类型系统能帮助你有效防止许多潜在的运行时错误，而且随着你的应用日渐丰满会更加显著。这就是为什么 Vue 不仅仅为 Vue core 提供了针对 TypeScript 的官方类型声明，还为 Vue Router 和 Vuex 也提供了相应的声明文件TsConfig配置{"compilerOptions": {// ts 文件编译成 js 文件的时候，同时生成对应的 map 文件"sourceMa...
vuex环境和webpack安装步骤
富在术数不在劳身,利在势局不在力耕。
06-09 233
vuex环境搭建： 1.安装npm，去https://nodejs.org网站下载到本地安装，用npm -v测试是否安装成功 2.命令行模式下 下载cnpm 用-g设置成全局 npm install -g cnpm --registry=https://registry.npm.taobao.org 用cnpm -v查看是否安装成功 3.安装脚手架 cnpm install -g vue-cli 4.安装webpack： vue init webpack-simple vuex-playlist 5.进.
Vue Cli3项目打包过程优化和文件配置
JackieDYH的博客
10-10 1188
一、新建项目 使用vue-cli3构建一个初始的Vue项目：Cli3 官方文档 因为使用了cli3，很多目录结构不见了，而相关配置是放在vue.config.js里面的，因此在根目录，新建一个vue.config.js module.exports = {} 二、正式优化 1、将 productionSourceMap 设为 false (1) 在vue.config.js中module.exports写入： module.exports = { productionSo..
webpack创建vue项目使用vuex生命周期函数
_小郑有点困了的博客
04-17 278
webpack创建vue项目使用vuex生命周期函数 我要实现的效果是，点击改变vuex里面的数据，但是不跳转就能改变，所以操作是这样的，在created中获取数据，页面接受这个数据，然后点击改变页面的数据，但是仅仅改变的是页面的数据，跳转其他页面再回来这个数据就重置了，所以需要在生命周期函中的beforeDestroy中，在组件销毁之前将页面改变后的数据存回到vuex中。有点类似于订单状态分类的...
Vue.js学习之vue-router vuex axios webpack
大灰狼的小绵羊哥哥的博客
02-14 2377
Vue.js学习系列一 —— vue-router2学习实践笔记（附DEMO）Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）Vue.js学习系列三 —— axios和网络传输相关知识的学习实践Vue.js学习系列四 —— Webpack打包工具的使用
Vue3+webpack项目的vuex封装
月影WEB的博客
05-23 714
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 简单解释就是它是用来放项目所有组件都能共享的数据用的。 首先安装vuex： npm i vuex -s 封装vuex的目录结构如下图： 图1 【./src/store】：用来存放封装 vuex 相关文件的文件夹； 【./src/store/index.js】：封装 vuex 的主体文件，创建全局store，存放全..
django debug=false后静态文件丢失_django 入门第一课 配置文件
weixin_39905037的博客
11-24 123
祭奠我逝去的一天，献给和我一样刚刚入门的小白在我们千辛万苦创建了一个jango项目后，是时候开始配置文件了第一：镜像路径配置检查settings文件中templates,确认这里的镜像路径和项目中的镜像文件夹同名，这里一般系统默认设置，我们不用再做更改，但以防万一还是检查一下。第二 :静态路径配置这里需要先在项目根目录下建static静态文件包，在setting最低端配置系统静态路径STATICF...
Web前端开发之VUE17——Vuex
DRLDER的博客
04-24 1540
为了便于我们对多个组件复杂多样的数据分享和处理进行统一控制，vue推出vuex作为多组件统一控制的工具。
零基础搭建Vue3.0 webpack工程：从安装到配置详解
本篇教程是针对初级工程师的入门级指南，详细介绍如何从零开始在移动端构建一个基于Vue 3.0的单页面应用，并使用Webpack进行工程管理。整个过程将逐步引导读者设置环境、安装必要的依赖，以及配置基本的开发工具和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值