1. vue init webpack projectname(projectname是你项目的名称)

    创建项目卡住不动解决方案:

    https://cli.vuejs.org/zh/guide/installation.html

    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

    可以使用下列任一命令安装这个新的包:

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

    第一步,检查node.js是否安装,通过命令提示符,node -v   npm -v查看,如果没有请先安装node.js,如下图.

  2.  

    第二步,把npm换成cnpm,

    命令工具输入npm install -g cnpm --registry=https://registry.npm.taobao.org

    然后cnpm -v查看版本,如下图

  3.  

    第三步,全局安装webpack,

    使用命令工具输入cnpm install webpack -g。

    使用webpack -v查看版本

    如果webpack版本4以上,需要安装webpack-cli 依赖

    使用命令工具输入cnpm install webpack webpack-cli -g 如下图

  4.  

    第四步,安装vue-cli

    使用命令工具输入cnpm install vue-cli -g

    使用vue -V(这个V大写),如下图

  5.  

    第五步,上面步骤安装完后,就可以利用vue-cli初始化vue项目

    在你想要安装项目的而目录下输入vue init webpack projectname(projectname是你项目的名称),

    Project name:——项目名称

    Project description:——项目描述

    Author:——作者

    Vue build:——构建模式,一般默认选择第一种

    Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到

    Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度

    Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装

    如下图

  6. 6

    第六步,选择上一张图片的NO,I will handle that myself

    然后输入cd projectname(你项目名称)

    然后再输入cnpm install

    如下图

  7. 7

    第七步,输入cnpm run dev

    最后在网址打开http://127.0.0.1:8080/如下图

  8. 8

    最后附上项目的结构目录,如下图

vue-cli安装以及搭建vue项目详细步骤的更多相关文章

  1. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  2. 转载 IDEA搭建maven项目详细步骤(解决没有src及其下面的文件)

    转载自

  3. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  4. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  5. ubuntu下安装vue/cli提示No command 'vue' found

    通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...

  6. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  7. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  8. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...

  9. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

随机推荐

  1. R语言预测实战(第二章--预测方法论)

    2.1预测流程 从确定预测主题开始,一次进行数据收集.选择方法.分析规律.建立模型.评估效果直到发布模型. 2.2.1确定主题 (1)指标:表达的是数量特征,预测的结果也通常是通过指标的取值来体现. ...

  2. C# 很久以前几个常用类

    Base64加密解密 using System; using System.Collections.Generic; using System.Linq; using System.Text; nam ...

  3. JavaScript toFixed()、toExponential、toPrecision方法

    JavaScript toFixed() 定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberObject.toFixed(num) 参数 描述 ...

  4. kali语言设置

    1.直接在终端命令 dpkg-reconfigure locales 然后按需选择支持字符编码:en_US.UTF-8(英文).zh_CN.GBK(中文).zh_CN.UTF-8(中文) (注:选择字 ...

  5. 树莓派安装配置teamviewer host

    过程: 下载teamviewer,直接到teamviewer的官网上直接下载 下载完后,安装teamviewerw sudo dpkg -i 下载的文件的路径+文件名 安装完后会提示存在依赖问题,修复 ...

  6. npm install 成功安装依赖后,运行跑不起来怎么办?

    最近接手公司的项目,由于代码历史悠久,据说已经最少经历过了6个人的手,查看gitee提交的年限,竟然是1-2年前的代码,好吧.这个锅总得有人接,既然是架构师,就要勇于面对挑战,今天把我解决的方法记录起 ...

  7. 北风设计模式课程---接口分离原则(Interface Segregation Principle)

    北风设计模式课程---接口分离原则(Interface Segregation Principle) 一.总结 一句话总结: 接口分离原则描述为 "客户类不应被强迫依赖那些它们不需要的接口& ...

  8. leetcode-mid-Linked list- 230 Kth Smallest Element in a BST

    mycode  81.40% # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x ...

  9. YOLOv3 算法的详细说明

    YOLOv3没有太多的创新,主要是借鉴一些好的方案融合到YOLO里面.不过效果还是不错的,在保持速度优势的前提下,提升了预测精度,尤其是加强了对小物体的识别能力. 本文主要讲v3的改进,由于是以v1和 ...

  10. 第七周实验报告&课程总结

    一.完成火车站售票程序的模拟. 要求: (1)总票数1000张: (2)10个窗口同时开始卖票: (3)卖票过程延时1秒钟: (4)不能出现一票多卖或卖出负数号票的情况. 代码: public cla ...