Vue 脚手架笔记

最新推荐文章于 2024-07-05 23:07:33 发布
最新推荐文章于 2024-07-05 23:07:33 发布
阅读量1.1k 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Daemon__/article/details/123678275
版权

脚手架

更改国内镜像
  • 运行 npm i nrm -g 全局安装 nrm 包；
  • 使用 nrm ls 查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
  • 使用 nrm use taobao 切换不同的镜像源地址 ；
安装
  • npm install -g @vue/cli
使用

  • 在 code 文件下 shift + 鼠标右键，在此处打开 Powershell在这里插入图片描述- vue create + 项目名称在这里插入图片描述

  • 选择最后一个，自由配置模板[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6aQ0bpMa-1648000206896)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220322202938768.png)]

  • 空格键选中/取消选中[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVJkCXKT-1648000206897)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323083359860.png)]

  • 选择 vue 版本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ur31pPEo-1648000206897)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323083621627.png)]

  • 路由模式，选择 n，默认为 hash 模式，选择 y 后需要对服务器进行配置 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWSHfUnq-1648000206898)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323083801580.png)]

  • 是否新建单独配置文件，选择第一个，把相关的配置信息写道单独的配置文件中[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LIzr9LO-1648000206899)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323083826635.png)]

  • 选择 n ，不保存为模板[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3btNXJ1O-1648000206900)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323084036485.png)]

  • 启动项目[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GOG9Hjz7-1648000206901)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323091236857.png)]

    • 打开 VsCode 终端
    • 运行 npm run serve
    • 打开地址，如果可以正常访问，代表创建成功
      • 第一个是 本机地址
      • 第二个是局域网地址
枫红_
关注
Vue笔记（三）Vue脚手架（Vue CLI）
Tml的博客
10-05 1032
使用脚手架、render函数、ref属性、配置项props、mixin混入、插件、scoped样式、组件化编码流程、WebStorage、组件的自定义事件、全局事件总线（GlobalEventBus）、消息的订阅与发布、nextTick（生命周期钩子）、Vue封装的过渡与动画
【Vue项目笔记心得】 安装脚手架及配置时出现的问题
qiaoyangla的博客
04-12 2321
1、安装脚手架时，执行npm命令时一定要注意空格，比如第一步时的安装命令： npm install -g @vue/cli 注意install和g后面的空格 2、注意新建的文件夹的位置路径不能有中文，这样会导致安装不了。 3、vue-cli初始化项目 node + webpack + 淘宝镜像（会加快下载速度） 4-10：脚手架各文件夹含义： 4、node_modules文件夹：里面存放的是项目依赖 5、public文件夹：里面存放静态资源（图片），需要注意，放在这个文件夹中的静态资源，we
如何用VUE脚手架新建项目，并且设置淘宝镜像。
热门推荐
sheypang的博客
03-05 1万+
转载 http://blog.csdn.net/bruceyangjie/article/details/70168985首先要安装好node.js，然后才可以用vue。设置淘宝镜像：大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。[html] view plain copynpm install-g cnpm --registry=https://regis...
vue脚手架笔记
S1521327654的博客
03-23 180
vue脚手架的基本使用 vue是什么 vue是一套用于构建用户页面的渐进式框架 鱼其他大型框架不同的是，vue被设计可以为自底向上逐渐应用。vue核心库只关注图层 不易于上手 还方便与第三方库或者既有项目整合 另一方面 当鱼现代快工具链 以及各种支持类库结合使用时 vue也完全能够为组发的单页应用提供驱动 1.安装程序 power shell npm install -g @vue/cli（全局安装） 如果太慢切换成taobao 系统默认第一个 切换taobao为 这么下快 2.如果使用vue脚手架 s
vue脚手架学习笔记
weixin_42349568的博客
09-02 351
一，概述 vue脚手架用于快速生成vue项目的基础架构，其官网地址：http://cli.vuejs.org/zh/ Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。 简单来说，就是帮你把webpack构建配置好了，程序员乖乖写代码就是了。 二，安装 安装3.x版本的vue脚手架：npm i -g @vue/cli 三
Vue脚手架学习笔记
qq_38047526的博客
02-03 274
发多少方式方法
【Vue脚手架】总结笔记
我有满天星辰的博客
12-16 497
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。​ 2). 一些组件在用：放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
vue脚手架学习笔记一
斌哥谈编程
08-15 423
1. vue脚手架 用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm install npm run dev 生产环境打包发布 npm run build npm install -g serve serve dist http://localhost:5000 2. eslint 用来做项目编码规范检查
vue脚手架笔记.md
11-12
vue脚手架笔记带大家入门 大家可以在此基础再扩展
尚硅谷vue脚手架笔记
05-30
尚硅谷vue脚手架笔记
最新尚硅谷vue系列笔记
02-11
6. **生态丰富**：Vue生态系统非常活跃，有Vuex用于状态管理，Vue CLI作为项目脚手架工具，Axios用于异步请求，Element UI等UI库提供预设的组件样式，以及大量社区开发的插件和工具。 7. **Vue 3 更新**：Vue 3版本...
Vue框架笔记———Vue脚手架
qq_42995361的博客
05-09 416
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录第三章 Vue脚手架1.配置脚手架1.1初始化脚手架1.2 具体步骤2.脚手架文件结构3.关于不同版本的Vue4.vue.config.js配置文件5.ref属性6.props配置项7.mixin(混入)8.插件9.scoped样式10.TodoList案例10.1案例代码10.2 总结TodoList案例11.webStorage11.1 webStorage 代码示例11.2 webStorage总结12.组件的自定义事件12.
vue学习笔记——1{搭建脚手架}
最新发布
zhouchao1964的博客
07-05 287
新手入门
vue查看镜像地址及修改镜像地址为国内
xi_aot的博客
09-28 7281
vue查看镜像地址及修改镜像地址为国内
vue版本安装和淘宝镜像拉取
weixin_57031089的博客
12-27 688
vue版本安装和淘宝镜像拉取
【Vue】node查看镜像/切换镜像 / 查看镜像
weixin_44382688的博客
03-22 4512
查看node.js版本 node -v 切换镜像命令 npm config set registry http://registry.npm.taobao.org/ 查看镜像命令 npm get registry
vue学习之npm安装镜像、npm命令及nrm切换镜像
qq_38886284的博客
03-27 2235
npm安装镜像、npm命令及nrm切换镜像
npm，yarn，vue cli如何查看源和换源,删除node_modules
qq_43631129的博客
02-29 828
npm，yarn如何查看源和换源,删除node_modules
Vue以及VsCode实操
Mildswzc的博客
11-02 1039
Cd/d 目录注意：以下全篇写的(c)npm代表可以使用npm或者cnpm命令。
Vue脚手架解析：项目结构与Vue版本差异
"尚硅谷vue脚手架笔记" 在学习 Vue.js 开发时，Vue CLI（命令行工具）为我们提供了一个快速搭建项目环境的脚手架。这篇笔记主要围绕着Vue CLI创建的项目文件结构和Vue.js的不同版本进行阐述，帮助开发者更好地理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值