Vue的安装及使用教程【超详细图文教程】

一、安装Node.js

安装步骤详细见Node.js下载安装及环境配置 =》https://blog.csdn.net/WHF__/article/details/129362462

二、安装vue

①安装 vue.js： npm install vue -g // -g为全局安装

注意：要以管理员身份运行cmd命令窗口！！

点击【开始】菜单，在搜索框输入“命令提示符”，点击“以管理员身份运行”

②安装webpack模板：npm install webpack -g

安装webpack-cli：npm install --g webpack-cli

安装成功后使用【 webpack -v 】查看版本号

ps：如果出现以下情况，无法查看版本号，可以安装指定版本即可解决

③安装@vue/cli： npm install -g @vue/cli

输入： vue --version 查看版本号

④安装vue-cli： npm install -g @vue/cli-init

⑤安装vue-router： npm install vue-router -g

三、创建Vue项目

1.创建Vue项目 - vue init

vue init命令是vue-cli2.x提供创建Vue项目的方式，可以使用github上面的一些模板来初始化项目。比如webpack就是官方推荐的标准模板。

①创建方式： vue init webpack xxx项目名称

 vue create demo00

②具体环节的选择，回车确认

④创建完成， cd进入项目， npm run dev启动项目

⑤打开浏览器浏览器输入地址

2.创建Vue项目 - vue create

vue creat命令是vue-cli3.x提供创建Vue项目的方式，模板是固定的，模板选项可自由配置。

①创建方式： vue create xxx项目名称

 vue create demo01

②用键盘上下箭头移动到【Manually select features】，按回车键选择

③根据自己的需求选择，按空格键选择，回车键继续

Babel	vue项目中普遍使用 es6 语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将 es6 转成 es5。
TypeScript	TypeScript 通过添加类型来扩展 JavaScript。通过了解 JavaScript，TypeScript 可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行 JavaScript 的地方。完全开源。
Progressive Web App (PWA) Support	渐进式Web应用程序（PWA）支持。
Router	Vue Router 路由。
Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
CSS Pre-processors	CSS预处理器，预处理器：比如要用 sass 或者 cssNext 就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成 css。
Linter / Formatter	格式化程序。
Unit Testing	单元测试。
E2E Testing	端到端（end-to-end）。

④选择vue版本号，这里我选择2.x，回车键继续。

⑤这里我选择否，输入： n，回车继续。

⑥ 选择 eslint 校验规则。此处建议选择默认配置，即直接回车即可。

⑦选择什么时候进行代码校验，此处建议选择第一个，回车即可。

⑧选择存放配置，此处建议选择第二个，存放到package.json中，回车即可。

⑨选择是否保存本次配置。建议选择 N，即不保存。回车确认。

⑩创建项目成功，cd 项目名称进入项目，npm run serve 运行项目

复制Local地址，打开浏览器粘贴到浏览器地址栏中按下回车键

结束

Vue的安装及使用教程【超详细图文教程】相关推荐

IntelliJ IDEA 下载安装及配置使用超详细图文教程
title: IntelliJ IDEA 下载安装及配置超详细图文教程 date: 2021-03-18 18:20:48 tags: Java IDEA categories: 开发工具及环境 co ...
CentOS7 64位下载配置与安装教程(超详细图文教程)
场景 CentOS官网: https://www.centos.org/download/ 但是目前官网最新版本是CentOS8,如果想要下载安装CenOS7的话可以在阿里镜像上下载 http://m ...
MySQL安装配置教程(超详细图文教程)
一.从Mysql官网下载二.安装教程下载完成后直接双击进行安装,打开后的页面如下所示: 选择自定义custom,接着下一步将MySQL Server 展开,添加到右边(点击绿色箭头) 选择安装位 ...
如何自己开传奇单机架设超详细图文教程
如何自己成为传奇,如何自己搭建传奇非官服,首先下载传奇服务器后,会有两个压缩包,一个用于服务器,一个用于游戏补丁文件传奇单机设置-GOM引擎的超详细图文教程版本文件包含.exe,以上文件都不起作用 ...
CENTOS 7 踢用户_从零学ELK系列（三）:Centos安装Docker（超详细图文教程）
CSDN博客地址(关注,点赞) 人工智能推荐 GitHub(Star,Fork,Watch) [前言] 为了更加真实的模拟生产部署环境,不仅需要Linux环境支持,而且ELK需要在不同的机器上部署:再 ...
从零学ELK系列（三）:Centos安装Docker（超详细图文教程）
[前言] 为了更加真实的模拟生产部署环境,不仅需要Linux环境支持,而且ELK需要在不同的机器上部署:再重新装几台虚拟机?本地资源不支持,于是乎想到了Docker:今天在上次的Linux系统(< ...
从零学ELK系列（四）:Docker安装Elasticsearch（超详细图文教程）
[前言] 为了更加真实的模拟生产部署环境,在上次的Docker环境中(<Centos安装Docker(超详细图文教程)>)中安装了Elasticsearch把步骤记录下来,一是方便自己以后 ...
从零学ELK系列（六）:Docker安装Logstash（超详细图文教程）
[前言] 为了更加真实的模拟生产部署环境,在上次的Docker环境中(<Docker安装kibana(超详细图文教程)>)中安装了kibana,本次我们将安装日志清洗组件---logsta ...
从零学ELK系列（七）:Centos安装Filebeat（超详细图文教程）
[前言] 为了更加真实的模拟生产部署环境,在上次的Docker环境中(<Docker安装Logstash(超详细图文教程)>)中安装了Logstash,本次我们将安装日志收集组件---Fi ...
centos7无界面系统物理机安装教程超详细完整教程图解
centos7无界面系统物理机安装教程超详细完整教程图解安装系统所需要用到的相关工具: 一个U盘(此U盘之后会被格式化,请先备份好里面重要内容) 系统镜像(自定义镜像文件,博主的镜像可在下面链接提取 ...

Vue的安装及使用教程【超详细图文教程】

Vue的安装及使用教程【超详细图文教程】相关推荐

最新文章

热门文章