vue脚手架的安装与使用

文章目录

  • vue是什么?
  • 一 安装node.js
    • 官网 https://nodejs.org/zh-cn/
    • 双击安装包安装
    • 安装完成后使用 node -v 查看是否安装以及安装版本
    • 切换淘宝NPM库(国内镜像地址,下载速度快)
    • 检查镜像配置是否生效 npm config list
  • 二 安装vue
    • 安装VUE和客户端
    • 初始化vue工程
    • 选择VUE 创建项目
    • 选择项目
    • 选择功能
    • 选择ESLint+ StandardConfig
    • 项目创建之后效果
    • 初始化项目
      • 安装插件
      • 安装axios,less-loader,less,vue-quill-editor,echars依赖
    • 关闭ESLint校验

vue是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

一 安装node.js

官网 https://nodejs.org/zh-cn/

vue脚手架的安装与使用_第1张图片
vue脚手架的安装与使用_第2张图片
下载图中的安装包

双击安装包安装

vue脚手架的安装与使用_第3张图片

安装完成后使用 node -v 查看是否安装以及安装版本

node -v 查看node版本
npm -v 检查NPM版本
vue脚手架的安装与使用_第4张图片

切换淘宝NPM库(国内镜像地址,下载速度快)

1). npm install -g cnpm --registry=https://registry.npm.taobao.org
方式2:
2). npm config set registry https://registry.npm.taobao.org (建议使用第二种)

检查镜像配置是否生效 npm config list

npm config list 命令
vue脚手架的安装与使用_第5张图片

二 安装vue

安装VUE和客户端

npm install -g @vue/cli --force

等待安装完成之后即可.
ps: 如果报错,删除用户目录下的文件,之后重新安装. (删除文件 不要删除目录) 或者 执行卸载命令 npm uninstall -g @vue/cli 之后重新安装

初始化vue工程

vue ui

vue脚手架的安装与使用_第6张图片

选择VUE 创建项目

vue脚手架的安装与使用_第7张图片

选择项目

vue脚手架的安装与使用_第8张图片
选择:手动
vue脚手架的安装与使用_第9张图片

选择功能

vue脚手架的安装与使用_第10张图片

选择ESLint+ StandardConfig

vue脚手架的安装与使用_第11张图片

项目创建之后效果

vue脚手架的安装与使用_第12张图片

初始化项目

安装插件

vue脚手架的安装与使用_第13张图片
安装成功之后会提示配置插件 选择手动导入

安装axios,less-loader,less,vue-quill-editor,echars依赖

vue脚手架的安装与使用_第14张图片
vue脚手架的安装与使用_第15张图片

关闭ESLint校验

vue脚手架的安装与使用_第16张图片

你可能感兴趣的:(软件配置,vue.js,npm,node.js)