Vue学习001

最新推荐文章于 2024-10-30 15:23:59 发布
最新推荐文章于 2024-10-30 15:23:59 发布
阅读量301 收藏 1
点赞数
分类专栏： Vue学习 文章标签： vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Outsider98k/article/details/120510922
版权

目录

win10配置vue、idea配置vue

1.首先按照这篇博客进行配置。(建议cmd使用管理员身份，否则后面可能报错)

1.1在按照上篇博客配置时，我在基于 Node.js 安装cnpm（淘宝镜像）出现了问题。

2.接着在idea上配置vue环境

2.1在配置npm时，我出现的问题为：scripts处未出现dev选项 

2.2附上一篇也是配置vue出现问题并解决的博客

2.3由于在上面配置中出现过json的问题，附上一篇关于json文件的标准参考教程(各个字段意义等)

win10配置vue、idea配置vue

1.首先按照这篇博客进行配置。(建议cmd使用管理员身份，否则后面可能报错)

windows环境搭建Vue开发环境 - 阿梅M - 博客园

1.1在按照上篇博客配置时，我在基于 Node.js 安装cnpm（淘宝镜像）出现了问题。

    首先是出现错误 报错。

    解决方案是 使用管理员身份 重新进行配置。

2.接着在idea上配置vue环境

idea配置vue开发环境_drinkworld的博客-优快云博客_idea配置vue环境

2.1在配置npm时，我出现的问题为：scripts处未出现dev选项 

   解决方案：在最初建立项目时，未在cmd中输入新建命令。其中一个json文件有问题，索性删除后重新再通过cmd命令 进行新建项目  

   cmd下输入：vue init webpack 项目名

   接着选择目录下的json文件，自动scripts下就有dev选项了。

2.2附上一篇也是配置vue出现问题并解决的博客

使用IDEA工具配置和运行vue项目（详细其中的坑） - 四季写爱 - 博客园  

2.3由于在上面配置中出现过json的问题，附上一篇关于json文件的标准参考教程(各个字段意义等)

package.json文件 -- JavaScript 标准参考教程（alpha）

 

关于新版vue中没有dev.server文件的说明
Z忽虎的博客
07-13 3923
在新版vue.js中通过脚手架搭建的文件夹里面没有dev.server文件目录，原来是新版本的vue已将dev-server.js与webpack.dev.conf.js合并了.
学习问题记录：IntelliJ 2022.3.1新建vue项目报错，找不到package.json、missing script “dev“
jizhidalele的博客
01-09 2418
学习问题记录：IntelliJ 2022.3.1新建vue项目报错，找不到package.json、missing script "dev"
idea中不能使用npm命令的解决办法
qq_45663499的博客
11-22 5393
在idea的Terminal命令窗口里面输入npm -v的命令时，报’npm’不是内部或外部命令，也不是可运行的程序或批处理文件。这是因为idea的Terminal里面配的是git，而不是我们本机的cmd，这时我们只需要把git改为本机的cmd就好npm。点击IDEA左上角的File,点击settings，找到Tools,点击Terminal。这里找到Shell path,获取cmd.exe路径，点击窗口右下角的Apply。重启IDEA即可解决问题。
IntelliJ IDEA Dev 容器
深圳市多克创新科技有限公司
03-09 4528
IntelliJ IDEA Dev 容器
npm编译出问题
萝卜
07-11 426
配置好webstorm的node和npm环境，打开terminal控制台后 cmd进入项目文件夹，输入 vue init webpack 将package.json中丢失的： “dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”, “start”: “npm run dev”, “bu...
vue实例001
06-28
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。...通过深入学习和实践这个demo，你将对Vue有更全面的理解，为进一步探索Vue的高级特性和构建实际项目打下坚实的基础。
基于vue的uni-app生态——学习笔记001
qq_63690649的博客
03-14 2573
基于vue的uni-app生态——学习笔记001
Vue学习笔记（尚硅谷天禹老师）
m0_67391907的博客
03-06 1385
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue学习笔记(十一)
₍˄·͈༝·͈˄*₎◞ ̑̑的博客
10-30 1012
Promise详解
学习使用vue-cropper初始化记录-vue3.2
qq_32067561的博客
03-13 1973
开发时的一些问题记录，解决image跨域问题 进入正题，vue开发 一个优雅的图片裁剪插件 开发版本："vue": "3.2.25" 插件版本："vue-cropper": "1.0.2"
npm run dev 报错：missing script:dev
热门推荐
dt1991524的博客
10-09 12万+
  今天在运行Vue项目时，在运行npm  run dev时报错如下图： 打开package.js文件夹，发现文件夹里的scripts有dev如下图： ， 可就是好不到，什么原因呢？最后一看路径不对，vue init webpack my-project时，自己又建立一个文件夹,取不到对应的package.js中的dev. cd 到对应文件夹，重新运行npm run dev 就OK了...
运行npm run dev 提示：missing script:dev
u014202165的博客
02-27 1万+
1.首先可以初始化package.json文件  // npm init (会生成一个新的package.json文件，你在哪个路径下初始化的就去哪个路径下去找) 2.打开文件你会scripts下发现少了很多脚本，只有一个test，这时在命令行输入：vue init webpack 找回丢失的脚本 3.当你运行 npm install 时报错 解决：打开报错文件中找到错误信息下提示的路径，...
nodejs和Vue和Idea
GeniusXYT的博客
01-08 1604
文章目录Vue环境搭建Idea安装Idea中配置Vue环境Node.js介绍npm介绍Vue.js介绍[^3]Idea介绍 Vue环境搭建 概述：vue环境搭建：需要npm（cnpm），而npm内嵌于Node.js，所以需要下载Node.js。 下载Node.js：Node.js官方下载 安装Node.js：双击 - 选择目录 - 一路next（安装程序会自动把node、npm环境变量...
在idea中运行Vue项目，省略npm run dev命令
spring_zhangH的博客
06-02 2603
输入npm run dev命令时出现 npm ERR! missing script: dev的bug
weixin_40945354的博客
10-12 1415
npm run dev npm ERR! missing script: dev npm ERR! A complete log of this run can be found in: npm ERR! /Users/ivyone/.npm/_logs/2020-10-12T07_24_45_379Z-debug.log
IntelliJ IDEA启动Vue项目无法识别package.json中定义的脚本，Please specify npm scripts to run，Error: No ‘‘ npm script
不秃头码农
11-22 2476
IntelliJ IDEA启动Vue项目无法识别package.json中定义的脚本，Error: Please specify npm scripts to run，Error: No 'xxx' npm script
npm run dev 报错missing script: “dev“
qq_63083501的博客
03-24 926
npm run dev 报错missing script: "dev"
idea启动vue项目npm run dev启动失败
weixin_53618357的博客
11-13 2317
使用命令 npm run dev 启动项目报了下面的错误，最主要的还是没有找到package.json这个文件。
npm ERR! missing script dev
JunWeiJodn的博客
06-03 1万+
刚刚npm install之后执行npm run dev 出现的报错信息npm ERR! missing script: dev 1、一种可能时vue init webpack的时候多建了一层文件夹，然后运行的时候没有找到package.json。、 2、打开当前的文件夹，发现文件夹package.json中没有npm run dev所以不能够运行、解决办法是重新npm install。 3、第三种是我遇到的问题： ​ 是因为package.json中看到的scripts是这样的 那就不能用npm run
vue2商城
最新发布
03-20
### 关于 Vue2 实现商城功能的开发 Vue2 是目前较为成熟的前端框架之一，在构建复杂的单页应用（SPA）方面具有显著优势。以下是有关 Vue2 开发商城系统的相关内容。 #### 1. **技术栈的选择** 在开发基于 Vue2 的商城系统时，通常会搭配以下工具和技术： - 前端 UI 库：Element-UI 或 Ant Design Vue[^2] 提供了丰富的组件支持，能够快速搭建界面。 - 路由管理：Vue Router 可用于处理页面间的跳转逻辑。 - 状态管理：Vuex 适合用来管理全局状态数据。 - 后台接口调用：Axios 是常用的 HTTP 请求库。 #### 2. **环境搭建** 为了启动一个 Vue2 项目并集成必要的依赖项，可以按照如下方式操作： ```bash # 创建新的 Vue2 项目 vue create vue2-mall # 进入项目目录 cd vue2-mall # 安装必要插件 npm install element-ui vuex axios vue-router --save ``` 上述命令将安装 Element-UI、Vuex 和 Axios 插件，这些对于商城项目的开发至关重要[^3]。 #### 3. **核心模块设计** 典型的电商系统包括以下几个主要部分： - 用户登录注册模块 - 商品展示列表 - 购物车功能 - 订单提交与支付流程 ##### (a) 登录注册模块 通过 Vuex 来存储用户的认证信息，并利用路由守卫保护受权限控制的页面。 ```javascript // store.js 中定义用户状态 export default new Vuex.Store({ state: { token: localStorage.getItem('token') || '', user: {} }, mutations: { SET_TOKEN(state, token){ state.token = token; localStorage.setItem('token', token); } } }); ``` ##### (b) 商品展示 商品列表可以通过动态加载的方式呈现给用户，结合分页和筛选条件优化用户体验。 ```html <template> <div class="product-list"> <div v-for="(item,index) in productList" :key="index" @click="viewDetail(item)"> {{ item.name }} - ¥{{ item.price }} </div> </div> </template> <script> import { fetchProducts } from '@/api/product'; export default { data() { return { productList: [] }; }, created(){ this.fetchData(); }, methods:{ fetchData(){ fetchProducts().then(response => { this.productList = response.data.list; }); }, viewDetail(product){ console.log(`查看商品详情`, product); } } }; </script> ``` ##### (c) 购物车功能 购物车的数据结构可以用数组表示，每条记录包含商品 ID、数量和其他属性。 ```javascript const cartItems = [ { id: 'p001', quantity: 2, price: 99 }, { id: 'p002', quantity: 1, price: 45 } ]; ``` 更新购物车的操作可通过 Vuex 的 mutation 方法完成。 ```javascript mutations: { ADD_TO_CART(state, payload){ const existingItem = state.cart.find(i => i.id === payload.id); if(existingItem){ existingItem.quantity += payload.quantity; }else{ state.cart.push({ ...payload }); } } } ``` #### 4. **示例代码资源推荐** 由于 Vue 社区活跃度较高，许多开源项目可供学习参考。例如 RuoYi-Vue3 尽管专注于后台管理系统，但也提供了一些通用的功能实现思路[^1]。此外，GitHub 上有许多针对 Vue2 构建的电商平台案例，可以直接克隆下来研究其源码。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值