三种方式快速搭建vue环境项目全过程(图解)

(一)环境搭建
1、下载源码
如果仅仅只是在项目或者某个文件中简单的使用vue，就可以直接在html中引入下列链接

<script src="https://unpkg.com/vue@next"></script>

可以复制上面的地址到浏览器打开源代码，复制全部源代码，保存为本地js文件,加入到项目中就可以使用了

1、安装Node
安装Node.js，下载地址：

http://nodejs.cn/download/

安装完成后可以查看node的版本

node -v

然后查看npm版本

node -v

默认使用的是国外的镜像install 比较慢，建议换成国内淘宝的镜像，这样速度能快很多

设置镜像

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

查看正在使用的镜像

npm get registry

如果没有切换成功可以手动切换

npx nrm use taobao

2、npm安装CLI
如果之前本地有安装vue2.x的脚手架版本需要先进行卸载

npm uninstall vue-cli -g

安装vue3

npm install @vue/cli -g

上面两句命令也可以合并一行执行

npm uninstall vue-cli -g && npm install @vue/cli -g

如果需要升级vue

npm update -g @vue/cli

查看vue版本(大V)

vue -V

3、cnpm安装cli
也可以使用cnpm来代替npm，cnpm是中国 npm 镜像的客户端以后就可以使用cnpm来安装插件

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

查看cnpm版本信息

cnpm -v

安装CLI脚手架

cnpm uninstall -g vue-cli && cnpm install -g @vue/cli

查看vue版本(大V)

vue -V

····································································································································································
使用CLI命令行创建项目

创建项目

vue create project

使用上下键切换选项,按空格选择，回车确认选择

Vue CLI v4.5.12
? Please pick a preset: Manually select features		请选择
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)												空格键选择，a键全选，i键反选
>(*) Choose Vue version									是否自定义选择vue版本
 (*) Babel												是否使用babel以支持ES6等语言
 (*) TypeScript											是否使用TypeScripyt
 (*) Progressive Web App (PWA) Support					PWA渐进式web app支持
 (*) Router												路由插件
 (*) Vuex												vue状态管理插件
 (*) CSS Pre-processors									CSS预处理插件
 (*) Linter / Formatter									代码 / 格式检查插件
 (*) Unit Testing										是否开启单元测试
 (*) E2E Testing										支持 E2E 测试

选择3.x版本

这里的两个命令要执行一下，上门的是切换到你创建项目的目录下，下面的是启动项目

这是成功后的样子

在浏览器输入框输入启动后的地址即可打开vue页面

使用webpack安装
1、安装cli-init

npm i -g @vue/cli-init

2、创建项目

vue init webpack project05

结果和第一种方法是一样的，而且使用webpack是vue2.x最常用的方法

Vite安装
Vite需要Node.js版本 > = 12.0.0。
1、创建项目

npm init @vitejs/app project02

也可以直接指定模板安装

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

支持的模板预设包括：

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts

选择一个模板
示例图解:

这三种方式使用最多的是webpack，而Vite是官网推荐使用的

有不对的地方可以留言指正。。。。。。