前提:必须安装node.js,官方地址:https://nodejs.org/en/

然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install -g @vue/cli

全局脚手架安装成功之后就可以创建vue项目了

三种创建方式:这里演示第三种

第一种(旧版本创建项目,不推荐):首先要安装依赖包 npm install -g @vue/cli-init 然后命令行输入: vue init webpack my-project 开始创建项目

第二种(新版本可视化创建项目,推荐):通过命令行输入:vue ui 进行可视化创建

第三种(新版本命令行创建项目):通过命令行输入:vue create my-project 开始创建vue项目

步骤一:选择安装方式:第一种自动安装;第二种手动安装建议手动安装选择自己需要的包。

步骤二:选择需要的包进行安装,空格选择,回车确定。这里选择常用的三个包

步骤三: 提示是否选择历史模式的路由,这里选N,哈希模式

步骤四:选择ESLint版本,这里用常规模式:Standard config

步骤五:语法检查方式,选择第一个:保存就检查

步骤六:选择Babel、ESLint文件存放,是单独存放还是存放在一起,这里选第一个单独存放,单独存放便于后期维护

步骤七:提示是否记录此次配置,记录此次配置再次创建项目时可以引用同样的配置,这里随意

回车等待创建完成

然后测试

首先进入创建的项目:cd my-porject  

然后进入项目跑起来~~~ npm run serve

项目成功跑起来之后会有一个哈希地址

复制地址到网页打开,出现下图说明项目成功创建完成!

VUE,基于vue-cli搭建创建vue项目的更多相关文章

  1. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  2. 【vue】如何在 Vue-cli 创建的项目中引入 iView

    根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save ...

  3. 【vue】如何在 Vue-cli 创建的项目中引入iView

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

  4. vue实战记录(二)- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

  5. vue.js(1)--创建vue实例的基本结构

    vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告

    报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\. ...

  7. Vue之vue自动化工具快速搭建单页项目目录

    1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...

  8. 【巷子】---vue基于mint-ui三级联动---【vue】

    一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...

  9. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

随机推荐

  1. ModelArts微认证零售客户分群知识点总结

    \ 作者:华为云MVP郑永祥

  2. 快速理解spark-on-k8s中的external-shuffle-service

    [摘要] external-shuffle-service是Spark里面一个重要的特性,有了它后,executor可以在不同的stage阶段动态改变数量,大大提升集群资源利用率.但是这个特性当前在k ...

  3. Python常用转义字符

    \   在行尾时是     续行符 \\   反斜杠符号 \' 单引号 \"  双引号 \a  响铃 \b  退格 \e  转义 \000  空 \n     换行 \v 纵向制表符 \t  ...

  4. Eclipse 安装 ShellEd 不成功的解决办法

    我是Win7, 64位的操作系统,Eclipse 版本是 32位的eclipse-java-luna-SR1-win32.在安装 ShellEd 时,一直安装不成功,前后出现两种现象: 1. 在按照网 ...

  5. luogu P4343 [SHOI2015]自动刷题机 |二分答案

    题目描述 曾经发明了信号增幅仪的发明家 SHTSC 又公开了他的新发明:自动刷题机--一种可以自动 AC 题目的神秘装置. 自动刷题机刷题的方式非常简单:首先会瞬间得出题目的正确做法,然后开始写程序. ...

  6. SpringBoot与JPA

    JPA是什么 JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA ...

  7. Orleans 序列化遇到的坑

    真的是巨坑 搞明白问题的我简直无法用言语来描述我的心情 先上架构图 理想中的架构 服务随便上 网关只负责分发 然后跟随官方教程写遇到了序列化问题 以前有经验,不慌,以前稀里糊涂就搞定了. 再然后遇到一 ...

  8. 拿到外包公司的offer,我要去么?

    引言: 前一阵子有一个帖子引起了非常广泛的讨论,描述的就是一个公司的外包工作人员,加班的时候因为吃了公司给员工准备的零食,被公司的HR当场批评!这个帖子一发出来,让现在测试行业日益新增的外包公司备受关 ...

  9. 【MyBatis-Plus】使用学习

    [MyBatis-Plus]使用学习 ============================================== 1.插入和更新字段空和非空控制 2.插入和更新字段填充策略 ==== ...

  10. 【Java笔试】对数据库中的分解是否为无损连接和是否保持函数依赖的判定-由牛客网试题引申-保姆式教学

    [牛客网数据库原理题目]设关系模式R(A,B,C),F是R上成立的FD集,F={A→B,C→B},ρ={AB,AC}是R的一个分解,那么分解ρ()? 正确答案:C你的答案:A(错误) ( A ) 保持 ...