命令行生成vue项目框架

— 安装nodejs

用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,

所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:

nodejs安装 : http://blog.csdn.net/zzwwjjdj1/article/details/51980082

npm 介绍: http://blog.csdn.net/zzwwjjdj1/article/details/51982433

— 安装命令行工具

npm install -g vue-cli

-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用.

命令行生成vue项目框架

红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,

很快就安装好了.也可以使用cnpm安装.

安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了.

命令行生成vue项目框架

— 创建项目框架

vue init webpack my-project

创建一个基于\”webpack\”的项目,后面是项目名,

命令行生成vue项目框架

按照提示输入,项目名,项目描述,项目作者等等,看到最后这句项目就创建好了,

项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的

命令行生成vue项目框架

刚我们命令行输入的东西就在package.json这个文件里,打开文件

命令行生成vue项目框架

项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等.

— 安装依赖

生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装,

ctrl c 停掉刚生成项目的命令,cd vue-project 进入项目跟目录, 用命令 npm install 安装

命令行生成vue项目框架

同样是使用淘宝镜像.

命令行生成vue项目框架

当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖,

可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

命令行生成vue项目框架

dependencies是项目依赖,

devDependencies是开发时项目依赖.

— 运行测试

好了,依赖安装完成后就可以运行我们的项目了命令:

npm run dev

命令行生成vue项目框架

看到这样的输入项目就运行起来了,然后打开浏览器,输入第二个红框的地址 localhost:8080,

浏览器截图.

命令行生成vue项目框架

命令行生成vue项目框架

项目就运行起来了.命令行生成的vue项目,还支持热启动,当项目文件有改动的时候,页面会自动变化,

<script>标签里的js代码修改后,还得手动刷新页面,不过已经非常棒了.

意外金喜的博客:http://blog.csdn.net/zzwwjjdj1

郑重申明,发表的文章都是我自己博客原创的,这是技术分享,再被封就不在这里玩了. ╭(╯^╰)╮

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年10月25日 上午8:49
下一篇 2023年10月25日 上午8:59

相关推荐

  • UI设计和软件测试哪个好就业?(ui设计和软件测试哪个好就业)

    UI设计和软件测试都是非常重要的职业,而就业市场和机会也不同。以下是它们各自的特点和优势: UI设计: 1、UI设计,特别是在移动应用和网站开发中,是一个前景广阔的职业。随着移动互…

    科研百科 2024年5月19日
    113
  • 构建四级实验室体系 山东加快打造“1313”基础研究平台

    记者 于民星 基础研究是整个科学体系的源头,是所有问题的总机关。加强基础研究是科技自立自强的必然要求,是我们从未知到已知、从不确定性到确定性的必然选择。加强国家实验室同国家重点实验…

    科研百科 2022年10月20日
    521
  • 水利水电搜题软件哪个好用?水利水电搜题软件推荐(水利工程搜题软件)

    水利水电题目一般都是图文结合,让搜题变得非常的麻烦,也让备考的考生们很困扰,今天就为大家推荐一个拍照搜题神器,轻松搜索水利水电题目,快来看看吧! 搜题侠绿色版是一款功能强大的搜题软…

    2022年9月7日
    994
  • 科研项目分工时间占比

    科研项目分工时间占比 在科研项目中,时间占比是非常重要的一项指标,反映了项目团队在项目中的贡献和效率。合理的时间占比可以帮助项目团队更好地分配资源,提高项目进展和成果。本文将探讨科…

    科研百科 2025年5月7日
    2
  • 广西中青年科研项目结题

    广西中青年科研项目结题报告 近年来,广西在科技创新方面取得了显著成就,尤其是在青年科技创新方面。随着青年科技创新逐渐成为推动科技创新的重要力量,广西也积极鼓励青年人才参与科技创新,…

    科研百科 2025年4月29日
    1
  • 建筑设计项目管理系统

    建筑设计项目管理系统 随着现代建筑行业的快速发展,建筑设计项目管理系统已经成为了一个必要的工具。建筑设计项目管理系统可以提高建筑设计的效率和质量,降低项目管理的难度和风险。本文将介…

    科研百科 2024年7月14日
    40
  • it资产管理系统软件

    IT资产管理系统软件:提升IT运营效率的关键 随着数字化时代的到来,信息技术已经成为了企业运营的重要支撑。然而,信息技术的飞速发展也带来了管理上的挑战。如何有效管理IT资产,提高I…

    科研百科 2025年1月2日
    0
  • 运用“四个一”工作法 推进党支部建设全面进步全面过硬(党建工作四个一工作法)

    旗帜网 农业农村部科技发展中心第三党支部自成立以来,积极探索党建工作新模式,创建并坚持运用“四个一”支部工作法,以“一张图表”确保支部工作有序化,以“一个对子”增强党员干部凝聚力,…

    科研百科 2023年2月3日
    518
  • 科研项目整改报告框架

    科研项目整改报告框架 科研项目整改报告是项目完成后,对项目进行总结和反思的重要文档。一份好的整改报告可以帮助项目团队更好地了解项目的问题和不足,并为未来的项目提供指导和改进方向。以…

    科研百科 2025年3月5日
    2
  • 测绘行业项目管理系统

    测绘行业项目管理系统 随着测绘行业的不断发展,测绘项目的需求也在不断增加。传统的测绘项目管理方式已经无法满足现代测绘行业的发展需求,因此开发一款测绘行业项目管理系统成为必要。本文将…

    科研百科 2024年12月26日
    0