前提:必须安装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. Netty实现丢弃服务协议(Netty4.X学习一)

    何为丢弃服务(Discard Protocol),丢弃服务就是一个协议,是最简单的协议,它的作用是接受到什么就丢弃什么,它对调试网路状态有一定的用处.基于TCP的丢弃服务,服务器实现了丢弃丢弃协议,服 ...

  2. Vue-Router中History模式【华为云分享】

    [摘要] vue-router的history模式的服务端支持 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端> ...

  3. 基于webpack实现多html页面开发框架一 准备工作

    本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...

  4. 学习ThinkPHP的第21天---关联预载入、关联统计

    ThinkPHP关联预载入 预载入的作用是减少执行SQL语句,进而提升程序的性能. public function join(){ //用于监听SQL Db::listen(function ($sq ...

  5. Docker系列之MySQL安装教程

    Docker系列之MySQL安装教程 有了前面的基础教程Docker系列之常用命令操作手册之后,本博客记录一篇mysql的安装教程 mysql镜像查询命令 docker search mysql 几个 ...

  6. 调用rest api杀死yarn上的应用

    调用rest api杀死yarn上的应用 调用yarn reat api,通过app name 获取application id public static String getApplication ...

  7. LightOJ 1229 Tablecross

    Treblecross is a two player game where the goal is to get three X in a row on a one-dimensional boar ...

  8. HDU1529-Casher Emploryment(最最...最经典的差分约束 差分约束-最长路+将环变线)

    A supermarket in Tehran is open 24 hours a day every day and needs a number of cashiers to fit its n ...

  9. eviews面板数据的操作

    数据结构: 打开eviews File>new>workfile Object>new object > pool 输入城市名称: _bj 下划线加名称(必须是英文),竖着输入 ...

  10. LR静态存储/动态存储/指针变量脚本说明

    在一次教程学习中,看到该知识点并记录了下来,希望与大家共同探讨学习. 一.静态存储与动态存储 静态存储变量通常是在变量定义时就分定存储单元并一直保持不变, 直至整个程序结束.动态存储变量是在程序执行过 ...