vue下载与安装详细教程

1、安装node（网址：https://www.bilibili.com/video/BV1LA411u7dE?t=10）

①、进入node官网https://nodejs.org/zh-cn/ 点击下载，选择适配的

②、
双击安装，安装路径随意，勾选第四项，把node添加进path

勾选，帮我们自动下载插件

③、在cmd中输入node -v，若出现版本号，则安装成功

④、如果npm包管理不想存放C盘的话，那就手动创建红框里的两个文件夹于安装路径中

https://developer.aliyun.com/special/mirrors/notice?from=tnpm

上一行网址可能会出现
，所以直接把下一行输入在cmd中

npm install -g cnpm --registry=https://registry.npm.taobao.org/

安装成功后在cmd里输入cnpm -v判断是否安装成功

⑤、设置成功后所有全局安装的包，都会放到node_global文件夹中

2、安装完node、cnpm后开始安装vue3脚手架

输入cmd命令语句时，如果之前安装过2.x，那么在后边加上-init，向下兼容2.x版本

安装完后判断是否成功

3、创建一个vue项目：

两种方式：①在cmd里输入命令行vue ui跳转到网页在进行操作

网址https://www.bilibili.com/video/BV1Uy4y1E7qu?t=78

只在vue3中才能实现

②在idea里创造一个文件夹，在该文件夹目录的terminal 里输入vue create 项目名称，后续略

网址https://www.bilibili.com/video/BV137411B7vB

在vue2、vue3中均可实现

①：在cmd里输入vue ui（此后不能关闭cmd），跳转成功后，点击”创建”

选个想要的文件夹，双击进入，再点击创建

写入想要的名字，关掉初始化git仓库

点击下一步，选择手动

开启Router和Vuex，关闭Linter/Formatter（代码自动校验），下一步

打开历史记录，创建项目

点击创建项目，不保存预设

会发现页面在加载，cmd中在运行，漫长等待

npm config set registry https://registry.npm.taobao.org

设置完加速后效果非常显著：

创建完成

然后点击任务，再点击运行（这张图是已经点击运行后的，所以②处是停止）

当输出中出现两个蓝色地址说明运行成功了

在cmd里点击ctrl+c，就是退出，再点击y确认

但我们最终需要在idea中使用 vue，所以还需在idea中打开该项目。

注意点：vue的创建只能通过vue ui或终端，无法直接在idea的项目创建中创建，所以该方式①需要现在如上所述创造万一个项目的前提下，进入idea，找到创建好的项目，对其打开

（如何打开初始界面，百度搜索：怎样取消idea默认打开工程）

如果不是open or import选项，那就点击

找到之前创建的项目文件路径C:\Users\17813\VueProject\vuetest

成功打开后还需要在idea里安装插件，点击file，点击settings，再点击plugins

搜索vue，点击install

装完之后，重启idea，发现可以开发了

如果在main.js中的包引入部分报错，那就在settings里找到javascript，换成6就版本对应

在idea里如何启动vue：

打开terminal终端，输入npm run serve

点击红框里上部分的地址，跳转到如下页面说明启动成功

会发现一个问题，这个网页的布局排版与项目文件里的App.vue里的代码格式完全一致

想退出时在terminal里按键位ctrl + c

vue下载与安装详细教程相关推荐

mysql如何下载msi_2、Windows下MySQL数据库下载与安装详细教程 MSI方式
做者:叁念mysql 写在前言:本文篇幅比较长,可是整体分为三大部分:下载部分.安装部分.环境配置与测试部分 :读者能够自行选择阅读web 1.下载部分 MySQL数据库下载与安装详细教程sql 1. ...
SQL Server 2012 下载和安装详细教程（转载）
SQL Server 2012 下载和安装详细教程 1.软件下载 2.软件安装 3.软件验证 1.软件下载 (1)官网地址 https://www.microsoft.com/zh-cn/sql-se ...
【jdk1.8的下载与安装详细教程】
jdk1.8的下载与安装详细教程一.下载官网下载地址:https://links.jianshu.com/go?to=https%3A%2F%2Fwww.oracle.com%2Ftechnetw ...
mysql下镜像安装教程_mysql的下载和安装详细教程(windows)
Windows下安装MySQL详细教程 1.安装包下载 2.安装教程 (1)配置环境变量 (2)生成data文件 (3)安装MySQL (4)启动服务 (5)登录MySQL (6)查询用户密码 (7) ...
Qt Creator下载和安装(详细教程)以及如何发布可执行程序
简介 Qt是跨平台的图形开发库,目前由Digia全资子公司 Qt Company 独立运营,官方网址: http://www.qt.io/ 也可以访问Qt项目域名:http://qt-projec ...
Qt Creator下载和安装(详细教程)
简介 Qt是跨平台的图形开发库,目前由Digia全资子公司 Qt Company 独立运营,官方网址: Qt | Cross-platform software development for emb ...
node.js和npm下载及安装详细教程
一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...
vue-cli（vue脚手架）安装详细教程
vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK. 一.安装 ...
sublime text 3下载与安装详细教程
一.下载:打开官网下载链接http://www.sublimetext.com/3,下载Sublime Text 3 portable version"下载下来为"Sublime ...
qt creator linux安装教程,- Qt Creator下载和安装(详细教程)
如果想用一个exe干净利落的发布程序,就需要使用静态编译版的Qt库,网上有教程,我就不多说了,可以教大家用现成的,在Git-hub上正好有静态Qt库: https://github.com/foste ...

vue下载与安装详细教程

vue下载与安装详细教程相关推荐

最新文章

热门文章