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