三种方式快速搭建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是官网推荐使用的

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

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

linux安装-bin.rpm,Linux离线安装jdk，bin、rpm和tar.gz三种方式及配置jdk环境变量
本文主要是为了记录安装过程,方便后续用到时可及时翻阅,如有不对之处,请各位不吝赐教. 因离线安装方法较为常用,故本文主要说明使用离线方式安装jdk的方法,在线安装方法后续补充. 第一步:下载jdk 官 ...
三种方式快速将pdf转换成ppt
众所周知,PDF和PPT都是在办公生活中广泛应用的文件格式.我们来看看它们之间的几点对比,从文件类型上来看,PDF是一种用于存储文档的静态文件类型,而PPT是一种幻灯片演示软件,可以制作动态演示文稿. ...
3. mysql的注解驱动的三种方式_上手spring boot项目(三)之spring boot整合mybatis进行增删改查的三种方式。...
1.引入依赖 org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot- ...
VMware Workstation网络连接的三种方式原理详解与配置过程图解
VMware workstations为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式). 打开vmware虚拟机,我们 ...
Redis批量删除Key的三种方式(linux和windows环境下都有)
Redis 中有删除单个 Key 的指令 del,网上资料大多数都说没有批量删除 Key 的指令,是否真这样有待再次确定,不过我们可以借助 Linux的 xargs 指令来完成这个动作,redis本身 ...
vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
Vue CLI 脚手架详解：快速构建 Vue.js 项目的利器
目录一.安装和创建项目二.项目结构三.开发和构建四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...
$.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式
这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题.大家可以收藏起来,以备用时之需! 1.同源策略 1.1 含义 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略&q ...
IoC、Spring 环境搭建、Spring 创建对象的三种方式、DI
二.IoC 中文名称:控制反转英文名称:(Inversion of Control) 3.I oC 是什么? 3.1 IoC 完成的事情原先由程序员主动通过 new 实例化对象事情,转交给 Spri ...

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

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

最新文章

热门文章