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

vue-cli脚手架 搭建项目

在这里插入图片描述
在这里插入图片描述

前端的工程化开发,搭建vue开发环境 一般会选用基于webpack的脚手架工具进行项目构建。
要求node.js版本是8以上的

0 检测node版本
node -v
在这里插入图片描述

1 全局安装
npm install -g @vue/cli 安装全局脚手架
或者
yarn global add @vue/cli

在这里插入图片描述
2 检测安装的vue-cli的版本 4.2.3
vue -V
在这里插入图片描述
3 脚手架创建项目
vue create 项目名称
在创建的项目终端中打开-- 指令 vue create 项目名
回车 --yes/no -->y/n
键盘的方向键 下键 加 回车
方向上下 加空格 就是选中终端中的文件 (试试就知道了)

在这里插入图片描述

如果不让默认就按下键 。就会生成下边的样式
然后需要哪个 键盘下键+空格键 ,就是确认。
画箭头的也重要,只是目前不需要 。
在这里插入图片描述

当选中所需 完成之后 ,直接回车
聚会出现 询问你是否使用hisTory的路由模式 这个额一般是生产开发阶段用的 ,需要后台服务器的支撑。可以选择yes或者no
在这里插入图片描述
如果是 n之后
在这里插入图片描述
上边这个sass都可以用 ,一般用最新版的第一个。如果后续有冲突在重新安装 node sass就可以了。

下边可以选择默认 回车就可以了

在这里插入图片描述
这个需要注意
在这里插入图片描述
当选择y的时候是一个预设
假设给有一个预设名,用的时候是直接 vue created 预设名
这里我设置了n之后就会提示选择通过哪种方式安装,是yarn 或者npm
在这里插入图片描述
这的选择根据你安装的是npm还是yarn 两个如果都有安装,都可以随便选中一个安装 注意的是,指令不一样, npm

当我们安装成功之后 就会在我们创建的项目目录下生成以下
在这里插入图片描述

运行到这里 ,我们要注意 这个地方的yarn serve
是根据你当时创建的 vue create 项目名称 来执行的。需要的话就 cd 项目名称
然后 指令 yarn serve就启动就可以了
(如果是num的话 一定要是 npm run serve
npm的话 是执行npm run serve )

我们yarn serve 成中之后
在这里插入图片描述
会给两个访问地址 ,随便选

在这里插入图片描述
就可以访问了
在这里插入图片描述

剩下就是我们的操作了
在这里插入图片描述
在这里插入图片描述
也就是说你在App.vue里操作什么,我们的index文件就会对应什么 ,那么页面渲染就生成什么。也就是热加载 不需要我们手动刷新。

之所以会解析以vue为后缀的文件,是因为vue-loader 支持。

以vue为后缀名的组件就是单文件组件

相关文章:

  • 玩转无线电 -- 温哥华天车 RFID 票务系统
  • 前端常见的linux指令
  • [转]CentOS-6.3安装配置SVN
  • leetcode 205. Isomorphic Strings
  • node的安装
  • Sqlserver2008相关配置问题
  • node 模块简述--内置fs http ---自定义模块
  • ppt 制作海报 导出高分辨率图片
  • 数组常见的方法
  • 数据结构-C语言递归实现树的前中后序遍历
  • 核心动画(Core Animation)
  • url模块 和 querystring模块
  • APP开发的一些简单流程思路
  • querystring 查询字符串模块
  • 查看数据库表的数据量和SIZE大小的脚本修正
  • docker python 配置
  • es的写入过程
  • Git 使用集
  • Node.js 新计划:使用 V8 snapshot 将启动速度提升 8 倍
  • react-native 安卓真机环境搭建
  • Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
  • vue-cli3搭建项目
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 发布国内首个无服务器容器服务,运维效率从未如此高效
  • 给github项目添加CI badge
  • 将 Measurements 和 Units 应用到物理学
  • 前端相关框架总和
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 深度学习入门:10门免费线上课程推荐
  • 用 Swift 编写面向协议的视图
  • python最赚钱的4个方向,你最心动的是哪个?
  • 带你开发类似Pokemon Go的AR游戏
  • #gStore-weekly | gStore最新版本1.0之三角形计数函数的使用
  • ${factoryList }后面有空格不影响
  • $HTTP_POST_VARS['']和$_POST['']的区别
  • (06)Hive——正则表达式
  • (1)Map集合 (2)异常机制 (3)File类 (4)I/O流
  • (AngularJS)Angular 控制器之间通信初探
  • (阿里云万网)-域名注册购买实名流程
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (原+转)Ubuntu16.04软件中心闪退及wifi消失
  • (转)linux下的时间函数使用
  • *** 2003
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .net on S60 ---- Net60 1.1发布 支持VS2008以及新的特性
  • .NET 除了用 Task 之外,如何自己写一个可以 await 的对象?
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题
  • .NET 中 GetHashCode 的哈希值有多大概率会相同(哈希碰撞)
  • .NET 中让 Task 支持带超时的异步等待
  • .NET的微型Web框架 Nancy
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .NET中统一的存储过程调用方法(收藏)
  • :如何用SQL脚本保存存储过程返回的结果集
  • @AliasFor注解
  • @Builder用法