当前位置:首页 » 《随便一记》 » 正文

安装Vue,并搭建Vue项目_彭_德华的博客

17 人参与  2022年03月17日 12:17  分类 : 《随便一记》  评论

点击全文阅读


文章目录

  • 前言
  • 一、安装Vue
    • 1.安装node.js
      • 配置路径和缓存(非必要)
    • 2.安装cnmp镜像
    • 3.安装vue-cli3.0脚手架
  • 二、可视化工具构建Vue项目
    • 1.进入图形化界面
    • 2.创建项目


前言

本篇简述Windows下,安装、搭建Vue项目。Vue的一些基本语法不涉及,需要自行学习。

在学习前端前沿技术之前,在本地安装node+vue环境。Vue通过尽可能简单的 API 实现 响应的数据绑定组合的视图组件。它易于上手,便于与第三方库或既有项目整合。

一、安装Vue

安装它的方式有三种:安装独立版本、使用CDN方法安装和使用NPM方法(推荐使用)。NPM更有利于构建大型应用。这里记录NPM安装方法,需要:node.js环境、cnpm npm淘宝镜像、vue-cli架构工具

1.安装node.js

安装node.js的步骤比较简单,先从node.js官网下载并安装node,【建议下载msi版本的文件包,可以直接双击就安装】

建议下载最新版

在这里插入图片描述

安装过程很简单,一直点下一步就ok了(选取对应的安装位置),安装完之后,我们通过打开命令行工具 【win+R】,输入node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。

小Tips:在cmd,输入color f0,可把cmd命令行背景颜色调为我截图的样式。输入color help查看用法。

在这里插入图片描述

npm包管理器是集成在node中的,所以安装了node也就有了npm,再输入 npm -v 查看nmp版本。

上述操作是没有配置环境变量的,而我们能在全局环境下操作到node,说明环境变量已经配置,而且是node自动配置的。

配置路径和缓存(非必要)

非必要选项,只不过是把缓存数据目录,设置缓存到指定的目录

另外,我按照node的路径是 D:\tools\node ,你需要设置成你的路径

npm在安装全局模块时,会默认将模块安装在 C:\Users\用户名\AppData\Roaming 路径下的npm和npm_cache中(可以去查看,是真的占C盘内存),不方便管理且占用C盘空间。

这里配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹:node_global 和 node_cache

在这里插入图片描述

然后在cmd命令下执行如下两个命令(执行成功就无任何响应):

后面的目录当然是pc的安装目录

npm config set prefix "D:\tools\node\node_global"
npm config set cache "D:\tools\node\node_cache"

没有异常的话,就在去到 环境变量设置处。

用户变量 下:

把node默认配置的变量删除掉,并新建 D:\tools\node\node_globalD:\tools\node\node_cache

在这里插入图片描述

系统变量 下:

新建变量名为 NODE_PATH, 值为 D:\tools\node\node_modules,如下图:

在这里插入图片描述

之后,在Path里面添加 D:\tools\node\
在这里插入图片描述


2.安装cnmp镜像

cnpm是npm的淘宝镜像,安装此工具的作用和mvaen安装淘宝镜像是一样的(直接访问国外网址很慢)。

在命令行中输入

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

没报错表示安装成功:

在这里插入图片描述

之后,就可以使用cnpm代替npm来安装依赖包了。


3.安装vue-cli3.0脚手架

这里就不安装就的vue-cli了,如果本机有旧版的vue-cli,执行以下指令删除:

卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g

安装新版本

安装完之后才可使用可视化工具,执行以下命令:

npm install -g @vue/cli

在这里插入图片描述

至此,前端需要的环境和工具都准备好了,接下来就是使用vue-cli构建项目


二、可视化工具构建Vue项目

1.进入图形化界面

之后,打开终端命令行,在命令行终端执行以下指令,进入Vue项目管理器

vue ui

启动后的页面如下图所示

在这里插入图片描述


2.创建项目

Vue工程创建必须使用指定的工具创建,我们这里使用Vue可视化工具创建,比如IDEA就只能打开Vue项目,不能创建。

点击 Vue项目管理器的创建,设置项目初始化信息

在这里插入图片描述

之后选择 手动 配置。

在这里插入图片描述

预设创建与否都行。

在这里插入图片描述

访问 localhost:8080,访问成功即可。


至此,Vue项目从安装到搭建都已经实现,之后的还会涉及到配合SpringBoot进行前后端交互操作。


点击全文阅读


本文链接:http://zhangshiyu.com/post/36305.html

安装  项目  工具  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 完结文重生高考填报志愿时,我放任全班上大专好文分享列表_完结文重生高考填报志愿时,我放任全班上大专好文分享(颜禾晚宋津年叶淼淼)
  • 陆寒澈沈秋晚小说完本+外篇(相逢难逃别离)畅享阅读
  • 雪上春霜删减内容修复版本(温观意陆一然)_雪上春霜删减内容修复版本(温观意陆一然)
  • 骤雨淋落晚星(林晚星裴临川)全书浏览_骤雨淋落晚星全书浏览
  • 全书浏览重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)_重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)全书结局
  • 他的甜撩藏不住附加黎初谢时晏:结局+番外免费品鉴(他的甜撩藏不住)全本浏览阅读连载中
  • 全文他死遁后逼疯清冷女权臣+完结+后续(苏煜顾宛柔)列表_全文他死遁后逼疯清冷女权臣+完结+后续
  • 暑假毕业旅游,班花将我们身份证交给黑导游(江诗晗)全书浏览_暑假毕业旅游,班花将我们身份证交给黑导游全书浏览
  • 重生到高考前,我放任竹马为爱私奔新上热文_裴文远柳雨文远完结版_小说后续在线阅读_无删减免费完结_
  • 雨织离歌浮生浅节选_沈翊鸣苏之雨小姐完整文本_小说后续在线阅读_无删减免费完结_
  • 鬓边不是牡丹红精选(盛惟芳萧既明贺锦)_鬓边不是牡丹红精选盛惟芳萧既明贺锦
  • 宋岑月傅忠焜:结局+番外免费品鉴:结局+番外评价五颗星

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1