Vue-cli3简单使用(图文步骤)

Vue-cli3.X创建项目

1.环境要求

安装Vue-cli3.x的前置条件：Node.js

以Windows为例安装Node.js,百度 “Node.js官网” 或”Node.js中文网”均可 ,如无特殊要求 下载安装 LTS版（长期支持版，该版本已满足Vue CLI官网所需要求版本要求）

一路Next即可，一般无需更改默认安装设置

安装完毕在开始菜单内即可找到一个名为 Node.js 的文件夹如下图

注：Node.js内可直接运行js基础代码（非DOM等相关代码）**

而我们需要使用的是 Node.js command prompt

2.Vue-CLI安装：

官方命令 npm install -g @vue/cli

注：@不能少，少了@安装的不是3.x版本而是1.x、2.x版本，若已经安装了旧版本则需卸载旧版本然后再安装新版本

旧版本卸载命令 npm uninstall vue-cli -g

补充：vue-cli 3.x 卸载命令 npm uninstall @vue/cli -g (如果需要可使用)

国内下载速度比较慢

查看npm当前下载镜像，命令为：npm get registry

结果> https://registry.npmjs.org/

如果嫌弃下载慢可以切换为淘宝镜像或者直接安装cnpm并更换淘宝镜像，命令如下：

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

等待安装完毕

2.1使用脚手架创建项目

建议先考虑项目文件夹储存的位置并进入相关位置，以桌面为例

cd desktop

如果无需更改位置，请跳过；如果需返回上级目录 cd.. 即可，其他cmd命令可自行百度

创建项目的两种方式：

一、直接命令行创建

创建项目命令： vue create 项目名 自己起个名字即可，但请注意不能有大写字母，否则报错：Warning: name can no longer contain capital letters

vue create learn √

接下来会问你选择那种配置（会显示所有保存过的配置，首次使用只会显示 default（babel,eslint） 以及 Manually select features）

可选自己之前创建过的或选择官方默认配置或者手动选择)

选择Manually select features 将出现以下内容

方向键 控制上下 空格选择 A 全选 I反转选择

选择好大体的功能/插件之后 回车 接着会让你选择细分的特性

比如 Linter/Formatter 下：

在保存时进行代码检测

Babel、PostCSS、ESLint等配置文件存放位置，选择单独保存在各自的配置文件中

Pick a CSS pre-processor(css预处理语言)下 有SCSS/SASS、LASS、Stylus

还有TS、PWA、Roter（vue 路由管理；SPA必带）、Vuex（vue状态管理）、测试（Unit Testing、E2E Testing）等等，均可按需选择

最后会询问你 是否保存为未来项目的预设配置 如果保存需要输入名称

等待项目创建...

项目创建好后按提示进入项目，并启动项目

cd learn 进入后 npm run serve

这两个地址均可访问，第二个地址也并不能对外访问，应该是没做好端口映射，那这个地址用来干嘛的？

二、通过GUI创建

在下载好vue-cli3.x后，进入项目存储位置后 输入 vue ui，会在浏览器内打开vue项目仪表盘（非初次使用界面）

在使用过GUI创建过项目后，再次打开就会直接进入旧项目管理界面，如上

如果需要再新建一个项目，可在 左上角下拉菜单内选择 ”Vue项目管理器“返回首页

创建——》在此创建新项目——》输入项目文件夹名（没有git建议关闭）——》下一步

可选自己创建过的配置或者官方配置或者手动配置

手动配置如下图所示， 按需选择，相关介绍之前提到过了

注：有下拉框的得先选择否则不能 下一步

最后点击创建并等待

最终和CMD截图如下

如果想在浏览器内启动的话 左侧菜单栏——》任务——》任务面板——》serve——》运行——》右侧 启动app (从左往右点击红色即可)

也可命令行启动，命令与之前所述相同

至此结束，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue-cli3 使用子目录部署问题

    在使用 vue-cli3 build的时候,使用非子目录需要在 vue.config.js 中添加如下代码: module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/', } 但是build完后,放在nginx服务下,会看到如下报错,页面也显示 no-script 的内容 [Vue warn]: You are using the runtime-only build of Vue wher

  • 一份超级详细的Vue-cli3.0使用教程【推荐】

    一份超级详细的Vue-cli3.0使用教程【推荐】

    主要内容: 零配置启动/打包一个 .vue 文件 详细的搭建过程 重点推荐:使用图形化界面创建/管理/运行项目 安装: 卸载旧版本: 如果你事先已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g Node版本要求: 3.x需要在 Node.js 8.9或更高版本(推荐8.11.0+),点击这里可以安装node 大多数人都安装过了node,使用下面的命令行 查询你的node版本 : node -v 如果你的版本不够,可

  • vue-cli3.0使用及部分配置详解

    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个 在选择功能后,会询问更细节的配置, TypeScript: 是否使

  • vue-cli3脚手架的配置及使用教程

    这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行

  • vue-cli3.0配置及使用注意事项详解

    vue-cli3.0配置及使用注意事项详解

    这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines) webp

  • 详解vue-cli3使用

    详解vue-cli3使用

    近日,Vue作者尤雨溪发布了正式的vue cli 3.0,基于webpack4,赶紧试一下. 文档地址vue-cli 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 使用 <!-- 安装 --> npm install -g @vue/cli <!-- 创建项目 --> npm create new-cli 然后就是配置,可默认(babel,eslint),自定义 自定义有 babel ts pwa vue-router vuex css预处理 以及Lint

  • 使用vue-cli3新建一个项目并写好基本配置(推荐)

    1. 使用vue-cli3新建项目: https://cli.vuejs.org/zh/guide/creating-a-project.html 注意,我这里用gitbash不好选择选项,我就用了基本的cmd(系统命令提示符):上下箭头和空格键可控制选项. 详细步骤: (1)vue create init: 这里我选择了自定义配置 (2)使用上下箭头和空格进行选择,我这里选择了这四个,之所以没用css pre-processors是因为我的项目中要用postcss-cssnext,后面会有详细

  • Vue-cli3简单使用(图文步骤)

    Vue-cli3.X创建项目 1.环境要求 安装Vue-cli3.x的前置条件:Node.js 以Windows为例安装Node.js,百度 "Node.js官网" 或"Node.js中文网"均可 ,如无特殊要求 下载安装 LTS版(长期支持版,该版本已满足Vue CLI官网所需要求版本要求) 一路Next即可,一般无需更改默认安装设置 安装完毕在开始菜单内即可找到一个名为 Node.js 的文件夹如下图 注:Node.js内可直接运行js基础代码(非DOM等相关代

  • 简单搭建VMware ESXi6.7(图文步骤)

    一.VMware vSphere简介 VMware vSphere 是业界领先且最可靠的虚拟化平台.vSphere将应用程序和操作系统从底层硬件分离出来,从而简化了 IT操作. 您现有的应用程序可以看到专有资源,而您的服务器则可以作为资源池进行管理.因此,您的业务将在简化但恢复能力极强的 IT 环境中运行. vSphere 是VMware公司推出一套服务器虚拟化解决方案,目前的最新版本为6.7,其核心组件为 VMware ESXi 和VMware vCenter. VMware ESXi 6.7

  • vue cli3 实现分环境打包的步骤

    vue cli3 实现分环境打包的步骤

    用cli3搭建的vue项目号称零配置文件,为了方便打包(不用手动来回改不同环境进行打包)那么我们在需要打包的时候分不同环境打包怎么办呢 1.在根目录下创建三个配置文件,如下图 这里我创建了三个,这三个分别是我的 本地:离线:线上环境 ,三个文件的内容依次为下VUE_APP_TITLE要对应当前文件后缀,build 对应的production NODE_ENV = 'production' VUE_APP_TITLE = 'alpha' ==============================

  • vue项目的创建的步骤(图文教程)

    vue项目的创建的步骤(图文教程)

    安装npm 1.检查node,未安装在这里下载最新版安装.2.检查npm,node自带npm但不是最新版本,需要命令更新:npm install -g npm 安装vue脚手架 1.在国内下载时网络会出问题,建议淘宝镜像下载,配置镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org2.用cnpm安装vue脚手架:cnpm i -g @vue/cli(其中i是Install安装的简写,g是global全局的简写). 创建

  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    创建Vue项目 在要创建项目的文件夹下面打开Powershell窗口 输入命令 vue create 项目名称 选择第二项 回车后 选择是否使用历史路由 no 回车 选择 Less 回车 选择第三个 回车 选择第一个 回车 选择第一个 回车 是否保存模板 选择no 完成啦 完成 总结 到此这篇关于Vue cli3.0创建Vue项目的文章就介绍到这了,更多相关Vue cli3.0创建Vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

  • Vue CLI3 如何支持less的方法示例

    本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-s

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • 详解Vue CLI3 多页应用实践和源码设计

    对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢? 解决思路: 首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面. 我们看一下官网给的 multi-page 的配置:需要在 vue.config.js 配置 pages,示例如下: pages:

随机推荐