首页 > 其他分享 >Vue快速入门01

Vue快速入门01

时间:2023-03-04 20:34:29浏览次数:38  
标签:npm 01 cli vue 项目 Vue 安装 入门

Vue快速入门01

一、安装Vue工具(Vue cli)

Vue cli基于 Vue.js 进行快速开发的完整系统。

人话:脚手架,顾名思义就是搭建工程的一个工具,脚手架有很多,vue-cli是其中一种。用来帮助快速搭建vue的开发环境。我们可以想象自己不是在搭建开发环境,而是在做ppt。做ppt之前从头开始设定动画交互、字体大小排班等东西太烦了,因此我们可以选一个现成的模板,直接在模板上修改。

npm是node.js包管理器,它会读取文件夹内部的package.json文件,检查当前的项目需要哪些node.js包来构成然后进行安装。

vue是一个前端框架包,是项目代码的构成部分。它不包含开发工具的作用。跟你使用的vue init xxx命令没有任何关系;

真正包含vue脚手架(也就是帮助你快速搭建vue开发环境的工具)功能的安装包是vue-cli,你只有在全局安装vue-cli(npm install -g vue-cli),你才能使用vue init命令,安装vue是无法使用vue命令的,vue-cli也不会参与你的代码组成。

webpack是什么?

cnpm install -g @vue/cli

  cnpm是淘宝镜像。原本是npm。 -g是全局。全局的指什么全局?

安装之后,你就可以在命令行访问vue命令。你可以通过简单运行vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功

vue --version
@vue/cli 5.0.8

二、创建一个项目

vue create vue-demo

清理控制台dos命令。cls

注:项目名不能大写。用- 分割。

vue init 和vue create 区别?

 

 

 上面截图选第三个

 

 

 选择1和3。不选linter/formatter。它是严格检查代码,可能有空格会提示,比较麻烦。代码规范化。

 版本选vue3.x

 

 

 默认文件夹

 

 

 选N

三、启动项目

 

npm run serve

!

 

 

 启动!

安装高亮插件 Volar

 

 

 ok,至此,vue的项目已经创建好了!!!

 

 

 

 

 

 所以来总结一下步骤: ①安装脚手架vue-cli。没有它就不能创建vue工程

          ②vue create 项目名。按步骤选择选项

          ③启动项目 ,npm run serve

          ④访问项目地址:localhost:8080

完结撒花

标签:npm,01,cli,vue,项目,Vue,安装,入门
From: https://www.cnblogs.com/liveforwhat/p/17178975.html

相关文章

  • 进制转换 洛谷P1017
    题目传送门题目描述我们可以用这样的方式来表示一个十进制数:将每个阿拉伯数字乘以一个以该数字所处位置为指数,以 1010 为底数的幂之和的形式。例如 123123 可表......
  • 使用nginx部署vue项目到服务器
    使用nginx部署vue项目到服务器1.连接服务器方法一:使用阿里云服务器*直接在阿里云上后台实例处选择远程连接即可方法二:使用使用Xshell和xfpt连接1.官网下载这两个......
  • 记录--在Vue3这样子写页面更快更高效
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在开发管理后台过程中,一定会遇到不少了增删改查页面,而这些页面的逻辑大多都是相同的,如获取列表数据,分......
  • vscode快捷生成vue模板
    1,文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json确定2,粘贴模板:{"Printtoconsole":{"prefix":"vue","body":[......
  • 基于NUXT.JS搭建一款VUE版SSR前端框架(解决SPA应用的SEO优化优化问题)
    小仙男·言在前关于框架:为了解决VUE的SPA单页应用对SEO搜索引擎优化不友好的问题,这几天一直在调研各种SSR框架。比如doc.ssr-fc.com/和fmfe.github.io/genesis-do都是......
  • 【Java Pro】001-Java基础:面向对象
    【JavaPro】001-Java基础:面向对象文章目录​​【JavaPro】001-Java基础:面向对象​​​​一、面向对象​​​​1、什么是对象​​​​现实生活中的对象与程序中的对象​​......
  • 【RockerMQ】001-RockerMQ 概述
    【RockerMQ】001-RockerMQ概述文章目录​​【RockerMQ】001-RockerMQ概述​​​​一、MQ概述​​​​1、MQ简介​​​​2、MQ用途​​​​限流削峰​​​​异步解耦​......
  • Transformer 模型:入门详解(1)
    动动发财的小手,点个赞吧!简介众所周知,transformer架构是自然语言处理(NLP)领域的一项突破。它克服了seq-to-seq模型(如RNN等)无法捕获文本中的长期依赖性的局限性。......
  • [TJOI2010] 阅读理解
    洛谷题意:给定\(N\)篇短文,每篇短文由\(L\)个单词组成,且只含小写字母;做\(M\)次询问,每次给定一个单词,求该单词在哪几篇短文中出现过。对于\(100\%\)的数据,\(1\leM\le10^4......
  • vite构建的vue3项目内mockjs的使用
    技术栈:vue3+vite+mockjs用法一:1、首先安装对应的依赖vite-plugin-mock,我这里是使用npm安装的,也可以选择其他安装方式;npminstallvite-plugin-mock-D2、项目内src......