vue安裝及配置 nodejs安装配置

vue安装及配置

vue安装步骤

nodejs安装

安装nodejs环境：https://nodejs.org/en/

查看node版本：node-v

vue3.0需要使用node 8版本以上

npm镜像配置

• npm是nodejs内置的资源管理器

• npm两个镜像：

  • 淘宝镜像：https://registry.npm.taobao.org

  • cnpmjs镜像

    • registry地址：https://r.cnpmjs.org

• npm config set registry https://registry.npm.taobao.org 切换国内镜像，使用淘宝镜像

• npm config get registry ：查看当前镜像使用地址，返回成功，则代表设置成功

安装vue-cli 脚手架

• 两种方式：
  • cnpm install -g @vue/cli
• 查看安装的：
  • vue --version

vuecli和vue的区别

概念方面：

• vue：是一套框架，用于构建用户界面的渐进式框架。
• vue-cli： 而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。

区别：

• vue是一整套框架，而vue-cli只是它其中的一个脚手架
• 脚手架是一个基于vue.js进行快速开发的完整系统，通过@Vue/cli实现快速搭建标准化项目

联系：

• vue-cli 是vue的命令行工具
• vue-cli是一个完整的vue项目核心构成

vue的版本和vueCli的版本的关系

• vue版本不受脚手架版本的影响。
• 使用vuecli构建项目时可以根据项目需求选择对应的vue版本

vue3.0 项目创建

第一步安装插件：

Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass、TypeScript、Jade和Less等等。

使用vite创建vue项目：

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

构建演示：

执行顺序：

先cd 进入目录，或直接使用vscode—>open 文件

1、cd vue-begin02
2、npm install   
3、npm run dev