全局安装vue-cli

命令行输入:

vue-cli版本在3以下

npm install --global vue-cli

安装vue-cli后,可以查看一下是否安装成功vue --version,

电脑上已经安装过vue-cli的话,省去上述步骤,开始建立项目

假设想把项目建立在D盘

输入:d:

回车

建立一个基于webpack模板的项目工程,项目名vueproject1(项目名自定义)

vue init webpack vueproject1

注意:项目名称不能包含大写字母

建立项目工程之后

接下来基本都回车

装好后,启动项目
cd vueproject1 // 进入到项目根目录

npm run dev// 启动项目

该项目在端口:http://localhost:8080上运行

在浏览器中输入:http://localhost:8080

具体教程参考:https://www.imooc.com/video/16985

项目运行过程中不要关闭命令行工具

vue-cli2.x版本安装vue-cli建项目的更多相关文章

  1. Vue脚手架最新版本安装使用

    现在很多的插件如Vant 这类的样式框架,都去兼容了Vue的3.0版本,所以我总结一下如何去简单的搭建一个Vue3.0的框架 开始 一,如何安装 在这里说明一下,Vue脚手架版本,和Vue版本是两个东 ...

  2. VUE知识day3_vue-cli脚手架安装和webpack模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  3. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  4. (原)Vue 单文件组件安装 (创建vue-cli 项目)

    更新于20200220 题外话:久违了我的博客园 正题: 1.准备工作,安装环境 1.安装node 官网下载安装即可  -- 配置环境变量 2.安装npm (基于node.js 包管理器) 3.安装c ...

  5. win10 安装vue 详解-包括node.js、npm、webpack

    1.下载 去官网下载 node.js https://nodejs.org/en/download/ 一般不会选择最新的,我安装的是 12.18.4 进入历史记录页面网址 https://nodejs ...

  6. vue(1)安装

    1.安装node.js(https://nodejs.org/en/),我安装的是 v10.15.1 1).在nodejs安装路径下,新建node_global和node_cache两个文件夹 2). ...

  7. MAC安装vue.js

    一.下载node node下载地址:https://nodejs.org/en/download/ 下载后点击安装即可. node -v 检查安装是否成功 二.安装 淘宝镜像 (npm) npm in ...

  8. vue自学入门-4(vue slot)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  9. vue/cli新旧版本安装方式

    一.老版本安装  Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...

  10. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

随机推荐

  1. 使用IDEA springboot 如何通过mybatis-generator自动生成mapper dao model

    第一步:在maven工程当中的resource下面,创建generatorConfig.xml文件. 务必注意创建的位置!!! <?xml version="1.0" enc ...

  2. Oracle中dual表的用途

    dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户,可以在 SQL Plus中执行下面语句 sele ...

  3. codeblock的一个小问题

    也许不叫问题吧,也可能是编译器的特性. 我的codeblock选择的编译器: 编写.cpp文件时,floatl类型输入输出都是 %f,double类型输入只能是 %lf,输出只能是 %f. 但是在co ...

  4. QT 设置应用程序图标和可执行程序图标

    1, 首先准备个ICO图标.例如:myappico.ico 在工程目录下新建images文件夹并你的图标myappico.ico(只能用ico格式的图片)放到工程目录下的images文件夹下 2, 用 ...

  5. 【leetcode】1290. Convert Binary Number in a Linked List to Integer

    题目如下: Given head which is a reference node to a singly-linked list. The value of each node in the li ...

  6. sp_dboption

    http://www.yesky.com/imagesnew/software/tsql/ts_sp_da-di_8c32.htm A. ½«Êý¾Ý¿âÉèÖÃΪֻ¶Á ÏÂÃæµÄʾÀý½« ...

  7. luogu 4047 [JSOI2010]部落划分 最小生成树

    最小生成树或者二分都行,但是最小生成树会好写一些~ Code: #include <bits/stdc++.h> #define ll long long #define N 100000 ...

  8. 【csp模拟赛2】 序列操作

    线性推,开数组太麻烦,可以用指针 代码: #include <iostream> #include <cstdio> #include <queue> using ...

  9. 集合家族——ArrayList

    一.概述: ArrayList 是实现 List 接口的动态数组,所谓动态就是它的大小是可变的.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类还提供一些 ...

  10. Spring Cloud Eureka(三):认识Eureka Server 与 Eureka Client

    Spring Cloud Netflix 是什么 This project provides Netflix OSS integrations for Spring Boot apps through ...