五分钟教你使用vue-cli3创建项目(新手入门)

目录
  • 一、搭建vue环境
  • 二、Vue脚手架工具
  • 三、创建项目
  • 四、选择manually select (enter键确认,并进入下一步)
  • 五、选择完成之后回车 这里我们选择3.x的
  • 六、完成之后回车 出现以下界面
  • 七、回车 出现以下界面
  • 八、回车出现以下界面
  • 九、回车出现以下界面
  • 十、回车出现以下界面
  • 十一、回车出现以下界面
  • 十二、根据提示，启动项目

一、搭建vue环境

安装Nodejs 官网下载Nodejs，如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版，稳定。

点我进入node官网

安装好后cmd输入node -v查询是否安装成功，如下出现版本号即为成功。

二、Vue脚手架工具

全局安装vue-cli，命令行中输入：

npm install --g vue-cli

国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝镜像或者yarn

淘宝镜像的安装如下

npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装成功后 使用 cnpm i xxx 代替 npm install xxx

三、创建项目

vue create 项目名
vue create  code    //其中code为你的项目目录名称   (enter键确认,并进入下一步)

最开始回车会出现下面两项

Default (Vue 3) ([Vue 3] babel, eslint)(默认配置 提供babel或者eslint支持)
Manually select features(手动选择项目特性)

我们可以通过上下键，空格来选择我们需要的，一般我们都会选择手动配置

四、选择manually select (enter键确认,并进入下一步)

对于每一项的功能，王同学做一个简单的描述：

  • Babel 主要是对es6语法转换成兼容的js （选上）
  • TypeScript 支持使用TypeScript语法来编写代码
  • Progressive Web App (PWA) Support [把网页做的更像原生app]
  • Router 支持vue路由配置插件（一般都会选择）
  • Vuex 支持vue程序状态管理模式 (一般都会选择)
  • CSS Pre-processors 支持css预处理器 （一般都会选择）
  • Linter / Formatter 支持代码风格检查和格式化 （选上）
  • Unit Testing 单元测试
  • E2E Testing E2E测试

常见的项目选择如下

五、选择完成之后回车 这里我们选择3.x的

六、完成之后回车 出现以下界面

这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n

七、回车 出现以下界面

这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个

八、回车出现以下界面

这里的意思是选择一种格式化代码方式：我一般选择 ESLint + Prettier

九、回车出现以下界面

这里的意思是问你什么时候进行代码规则检测，我一般会选择保存就检测，也就是Lint on Save

十、回车出现以下界面

这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个

十一、回车出现以下界面

这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了，完成后如下图：

十二、根据提示，启动项目

根据指令提示 我们先执行cd code，然后执行npm run serve

十三、当我们需要自定义webpack相关配置的时候需要在项目根目录中创建vue.config.js文件，它会被@vue/cli-server自动加载，相关配置内容官网将的很详细，大家可以自己去官网看 好了，今天的内容就到这里了，本期结束 我们下期见！！！

到此这篇关于五分钟教你使用vue-cli3创建项目(新手入门)的文章就介绍到这了,更多相关vue-cli3创建项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • 使用vue-cli3+typescript的项目模板创建工程的教程

    版本问题 全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它 (vue -V 查看自己的脚手架版本) npm uninstall vue-cli -g //或者 yarn global remove vue-cli 注:Vue CLI 3需要 nodeJs ≥ 8.9 安装 cnpm install -g @vue/cli 创建项目(以下只说明用vue ui图形化界面导入配置好的demo) vue ui 打开脚手架的图形化界面,进到到demo目录,导入(提示没有依赖,选择仍然导入

  • vue-cli3.X快速创建项目的方法步骤

    1.安装 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过以下方式先卸载它: npm uninstall vue-cli -g # 或 yarn global remove vue-cli vue-cli 3.x安装: npm install -g @vue/cli # OR yarn global add @vue/cli 说明:-g / global 表示全局安装. 安装完成后可通过以下

  • 使用Vue-cli3.0创建的项目 如何发布npm包

    在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建index.js进行模块的导出 将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册. import App from './App.vue' export default App; 修改vue.config.js配置文件 修改publicPath的路径为相对路径 mod

  • 五分钟教你使用vue-cli3创建项目(新手入门)

    五分钟教你使用vue-cli3创建项目(新手入门)

    目录 一.搭建vue环境 二.Vue脚手架工具 三.创建项目 四.选择manually select (enter键确认,并进入下一步) 五.选择完成之后回车 这里我们选择3.x的 六.完成之后回车 出现以下界面 七.回车 出现以下界面 八.回车出现以下界面 九.回车出现以下界面 十.回车出现以下界面 十一.回车出现以下界面 十二.根据提示,启动项目 一.搭建vue环境 安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版,稳定

  • 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 创建项目的方法步骤

    Vue Cli3 创建项目的方法步骤

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # OR vue ui default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持. Manually select features 自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 Ty

  • 五分钟教你手写 SpringBoot 本地事务管理实现

    五分钟教你手写 SpringBoot 本地事务管理实现

    白菜Java自习室 涵盖核心知识 1. SpringBoot 事务 一直在用 SpringBoot 中的 @Transactional 来做事务管理,但是很少没想过 SpringBoot 是如何实现事务管理的,今天从源码入手,看看 @Transactional 是如何实现事务的,最后我们结合源码的理解,自己动手写一个类似的注解来实现事务管理,帮助我们加深理解. 1.1. 事务的隔离级别 事务为什么需要隔离级别呢?这是因为在并发事务情况下,如果没有隔离级别会导致如下问题: 脏读 (Dirty Re

  • 五分钟教你了解一下react路由知识

    目录 什么是路由 纯组件的基本使用 纯组件使用的注意点 路由的基本初体验 HashRouter和BrowserRouter Link组件和NavLink组件 Route和Switch组件 路由传参 什么是路由 简单的说就是根据不同的地址,web服务器处理不同的业务以及逻辑. 以下代码全部运行在react脚手架中 纯组件的基本使用 // 组件更新机制: // 只要父组件重新渲染了, 所有的组件子树, 也会更新 // 性能优化 // 1. 减轻state // 2. 避免不必要的重新渲染 (性能优化

  • Vue UI创建项目详细步骤

    Vue UI创建项目详细步骤

    1.首先要安装最新的Vue CLI 在命令行工具里输入一下命令 npm install -g @vue/cli 或者 yarn global add @vue/cli 安装成功后,可用vue -V命令查看已安装的Vue CLI版本 2.在命令行运行 vue ui,就会出现图形化管理 在界面上可以看到第一个tab项目,点击创建这个tab ,可以来创建一个新的vue项目 3.点击了创建之后可以看到一下内容,可以项目创建一个目录或者选择一个目录,然后选择一种包管理工具:可以使npm,也可以是yarn等

  • 一步步教你用Vue.js创建一个组件(附代码示例)

    目录 前言 到底什么是组件? 为什么你一定要使用组件 在Vue中创建一个组件 模板部分 脚本部分 选项API:旧的方式 合成API:现在和未来 风格部分 总结 前言 Vue.js是一个渐进式框架,旨在以一种非常简单.直接的方式构建用户界面.它被设计成易于使用,并且足够灵活,可以处理各种各样的应用. 在本教程中,我们将向你展示如何用Vue.js创建一个简单的组件.我们还将介绍一些在使用组件时需要知道的基本概念. 我们将介绍在Vue中创建一个组件的基本语法,以及一些关于组件用途的理论.在这篇文章的最

  • 五分钟教你Android-Kotlin项目编写

    五分钟教你Android-Kotlin项目编写

    背景 之前就看到过Kotlin这一门语言,也有不少大神和愿意走在知识最前沿的哥哥姐姐们说这一门语言有多么多么的好,但是本人并没有去了解他,直到前段时间Google大会直接说会支持Kotlin语言,所以我就抽出了一点时间准备学习一下,个人觉得到目前为止这个东西并不是什么刚需,有兴趣可以学习,不想学影响也不是很大,好了关于这门语言有多好,有多叼,我就不多少了,想要了解的出门百度,这里给上源码链接Kotlin-Android项目. 插件安装 环境搭建当然是第一步,也是最重要的一步,但是这个Kotlin

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • vue cli3 配置 stylus全局变量的使用方式

    目录 vue cli3配置stylus全局变量 vue cli3使用stylus全局变量 vue cli3配置stylus全局变量 首先在common.styl文件中写一些常用的css变量,方便全局使用,避免重复代码. 预想的是在main.js中引入common.styl文件,然后所有的.vue文件就都可以使用了.但是事与愿违,根本不起作用. 网络上有很多教程,但是都不起作用(找答案是个痛苦且漫长的过程),下面是总结的代码,基本开箱即用,希望能帮助到需要帮助的人. // vue.config.j

随机推荐