VUE_2脚手架

1. 什么是: 一套已经包含核心功能和标准文件夹结构的半成品项目。
2. 为什么: 标准化!极其便于协作,降低学习成本。
3. 何时: 今后所有项目,所有新技术,都是在脚手架基础上开发的.
4. 如何: 2大步: 
  (1). 安装可以反复生成脚手架的工具: (老母鸡)
   a. 设置淘宝镜像——下载快
    npm config set registry https://registry.npm.taobao.org
    b. 安装可生成脚手架代码的命令行工具
    npm  i  -g  @vue/cli
    当看到: + @vue/cli@版本号 说明安装成功
  (2). 用工具反复为每个项目创建专门的脚手架结构: 
  a. 决定把项目文件夹保存在哪个位置
  b. 再在整个文件夹位置,运行: vue create 自定义项目名
    1). ? Please pick a preset:
       Default ([Vue 2] babel, eslint)
       Default (Vue 3) ([Vue 3] babel, eslint)
    > Manually select features
    2). ? Check the features needed for your project:
      ( ) Choose Vue version //按空格切换选中/不选中
      (*) Babel  //ES6翻译为ES5
      ( ) TypeScript  //下周一学VUE3再选
      ( ) Progressive Web App (PWA) Support
      (*) Router //VueRouter,SPA应用的核心
      (*) Vuex //下周一讲
      (*) CSS Pre-processors //支持Scss
      ( ) Linter / Formatter //不要选,代码质量检查工具,要求过于严格
      ( ) Unit Testing
    >( ) E2E Testing
    3). ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N
    其实vue的路由有两种模式: 
    i. hash(#)模式: http://域名:端口号/#/相对路径
    ii. history模式: http://域名:端口号/相对路径
       需要专业的服务器端工程师配合——必须配置服务器端的首页重定向机制。
    4). ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  > Sass/SCSS (with dart-sass)
    Sass/SCSS (with node-sass)
    Less
    Stylus
    5). ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
      In dedicated config files
    > In package.json
    6). ? Save this as a preset for future projects? (y/N) N
    7). 等待。。。
    看到: Successfully created project xzvue. 说明安装成功
5. 使用vscode打开并运行脚手架项目: 
  (1). 右键单击package.json文件,选择"在集成终端中打开"
  (2). 在终端窗口中输入: npm run serve
      看到: App running at:
           - Local:   http://localhost:8080/
  (3). 按住Ctrl,点local:右侧的连接,自动打开浏览器
    问题: 如果无法自动打开,可重装chrome浏览器并配置操作系统的默认浏览器为chrome。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/516692.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kubernetes operator 模式开发实践

0. 前言 近日我们在开发符合我们业务自身需求的微服务平台时,使用了 Kubernetes 的 Operator Pattern 来实现其中的运维系统,在本文,我们将实现过程中积累的主要知识点和技术细节做了一个整理。 读者在阅读完本文之后,会对 Oper…

Jenkins 2.322 安装 自定义插件

文章目录Jenkins自定义安装插件1. Rebuilder2. Safe Restart3. Artifactory4. Build Timeout5. Credentials Binding6. Email Extension7. Git8. Pipeline9. SonarQube Scanner10. SSH Build Agents11. Workspace Cleanup12. TimestamperJenkins自定义安装插件 在jenkins管理页…

从国际站 - M 站建设谈开发者产品思维

前言 作为一个开发者我们在持续不断地交付我们负责的需求,可我们很少从产品的角度来看待我们交付的需求,比方说一直被强调的需求类型、需求价值、需求目标。作为产品需要具备的能力:看到用户、倾听用户、判断用户、与用户连接、在用户的交互…

VUE_3脚手架

vue create 项目名 •(1). ? Please pick a preset: –Default ([Vue 2] babel, eslint) –Default (Vue 3 Preview) ([Vue 3] babel, eslint) –> Manually select features •(2). ? Check the features needed for your project: –(*) Choose Vue ver…

2020人工智能应用挑战赛前瞻 | 专家委员会强大阵容,震撼发布!

截止2019年8月份全国344所高校已经开办、正在开办、即将开办人工智能方向相关专业。还记得当时浙江大学在新增机器人工程和人工智能两个超级热门专业时,不仅引起国内教育界的讨论,国外媒体也争相报道。其中日本《日经亚洲评论》认为,中国教育…

超18万人次下载使用的 Cloud Toolkit 的成长历程

在文章的开始,先介绍一下 Cloud Toolkit 是什么? Cloud Toolkit 是阿里云发布的免费本地 IDE 插件,帮助开发者更高效地开发、测试、诊断并部署应用。通过插件,可以将本地应用一键部署到任意服务器,甚至云端&#xff0…

新华智云基于MaxCompute建设媒体大数据开放平台

摘要:随着自媒体的发展,传统媒体面临着巨大的压力和挑战,新华智云运用大数据和人工智能技术,致力于为媒体行业赋能。通过媒体大数据开放平台,将媒体行业全网数据汇总起来,借助平台数据处理能力和算法能力&a…

docker Gitlab14.5.0 初始化账号以及密码是什么呢?

文章目录1. 进入容器2. 进入bin目录3. 执行命令4. 执行命令5. 修改密码6. 确认密码7. 保存修改8. 操作记录(全)9. 操作截图(全)这时,gitlab已经跑起来了,通过浏览器能正常访问了,那么问题来了&a…

垂直居中和水平居中

垂直居中 父元素css: margin: 0 auto; 子元素css: position: relative; top: 50%; transform: translateY(-50%); 水平居中 父元素css: text-align: center;

坦白讲!90%的数据分析师都不合格!!

你还要在家待多久,之前托人给你找的工作你也不去,你到底想干什么呀!”大明的女友又开始了每日的说教,大明漠然的关上了门,隔绝了声音。大明是一名技术开发工程师,不知道这是第几次和女友的争吵了&#xff0…

“新基建”提速,工业互联网大数据发展迎新机遇

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 近期,中央政治局密集召开会议研究新冠肺炎疫情防控工作,部署统筹做好疫情防控和经济社会发展工作&…

MQ java.lang.OutOfMemoryError: unable to create new native thread

文章目录1. 问题现象2. 分析定位3. 解决方案4. 结果验证5. 总结1. 问题现象 java.lang.OutOfMemoryError: unable to create new native thread 2. 分析定位 生产上所有程序都是在jboss账户下运行,于是查看该账户下所有的线程数总和为950,也即是说&am…

flex 弹性布局 居中

display:flex; 垂直居中:align-items:center; 水平居中: justify-content: center;

多所高校内使用AI监控并追踪学生行为惹争议!

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 据华尔街日报报道,在美国各地大学校园之中,越来越多的技术开始用于集中监视、追踪和管理学生。 学校…

Kubernetes 并非灵丹妙药...

作者 | Alex Hewson译者 | 弯月,责编 | 郑丽媛头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews)以下为译文:我经常听到有人问这样一个问题:“我们应该将自家的技术栈托管到Kubernetes上吗?”…

云栖号在线课堂—云服务器数据库快速入门特辑

目前阿里云为用户提供丰富的云服务器ECS产品,不同系列ECS之间存在较大差异,选择合适的ECS,是业务起飞的第一步!除了基础的ECS产品选型和技术揭秘,还有阿里专家分享的ECS迁云工具轻松上云最佳实践、ECS弹性伸缩最佳实践…

Docker Nacos Mysql集群

文章目录一、基础准备1. 节点总览2. 安装docker3. 安装MySQL二、节点部署2.1. 拉取镜像2.2. 节点12.3. 节点22.4. 节点32.5. 搭建完成一、基础准备 1. 节点总览 IP端口用途192.168.159.1338848mysql nacos192.168.159.1338858nacos192.168.159.1338868nacos 我这里是用一台云…

鼠标悬停 显示遮罩层

HTML部分: css部分: .smallbox {width: 100%;.card {position: relative;top: 0;left: 0;width: 224px;height: 302px;margin-right: 70px;overflow: hidden;img {width: 224px;height: 302px;margin-right: 70px;}.message {position: absolute;// bottom: 0;left: 0;right: …

AI技术的“践行者” — 云测试成为企业降本增效利器

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 目前,人工智能技术对于加速企业数字化转型、提高信息利用效率等方面都起着重大作用。 尤其在提升社会劳动生产率…

从 Dagger 到 Hilt,谷歌为何执着于让我们用依赖注入?

来源 | 扔物线责编 | Carol文章开始之前,首先来看个视频:开始说到依赖注入,做 Android 的人都会想到一个库:Dagger;说到 Dagger,大家的反应普遍是一套三连:牛逼、高端、我才不用。又牛逼又高端&…