一、首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了。

搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一项——“在此处打开命令窗口”字样,点击就会出来,如图所示:

此位置就自动是你要创建项目的位置(当然,如果你想再创建文件夹,放在其他位置的话也可以直接输入打开命令npm cd+名字)。

在这里你可以检查一下,如下图的话你就算成功了!

二、安装vue脚手架

输入命令:npm install -g vue-cli

执行完之后,若不知道是否安装成功可以检验一下:vue -V(此处的-V是大写的!要注意),出现如下结果就是成功了:

三、创建项目

输入命令:vue init webpack +项目名称

如图所示,

结束之后,就是搭建完成,输入命令:cd +项目名称(此时在打开你刚刚创建的项目,进入到项目中运行);

再输入命令:npm run dev     运行项目。

也可以按照以下他告诉你的步骤,

完成之后就会出现:

之后,按照他告诉你的地址在浏览器中打开就可以了。(出现如下页面)

目录结构及含义如下:

脚手架方式搭建vue项目的更多相关文章

  1. 使用yarn搭建vue项目

    今天尝试了一下用yarn的方式搭建vue项目,方法其实是和npm的用法一样.但是在创建过程中报错了.现在整理一下,便于后期查错时使用. 以windows系统为例 1.全局安装yarn,三种方式 官网上 ...

  2. 利用VUE-CLI脚手架搭建VUE项目

    前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...

  3. 搭建vue项目环境

    前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...

  4. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  5. Mac中如何搭建Vue项目并利用VSCode开发

    (一)部署Node环境 (1)下载适合Mac环境的Node包,点击进入下载页面 (2)安装Node环境:找到下载好的Node包,这里是node-v12.14.1.pkg,我们双击它,会进入Node.j ...

  6. 手把手教你用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  7. 快速搭建Vue项目

    快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...

  8. Visual code 搭建Vue项目

    使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像  淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm ...

  9. 用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...

随机推荐

  1. 20180824fpreadforasp.net单元格类型绑定细则

    if(!IsPostBack) { //刀具类型 ComboBoxCellType cbx_dj = new ComboBoxCellType(); // cbx_dj.ShowButton = tr ...

  2. python 绑定方法

    一.绑定方法与非绑定方法 1.绑定方法''' 绑定方法:绑定给谁就是给谁用的 1.凡是类中的方法和函数,都是绑定给对象使用的: 2.绑定方法都有自动传值的功能.传递进去的值,就是对象本身. 3.如果类 ...

  3. iSlide——图标库、图示库的用法

    iSlide中,有一个“图示库”功能,主要功能是同时排列多块文字或多张图片.单击插图库,会弹出一个新的对话框.从中,可以选择权限.分类.数量数据和样式,也可以直接搜索.   下面就举一个例子:我要开一 ...

  4. JS案例四:表格的隔行换色以及高亮显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Ubuntu 18.04安装VNC远程登录

    reference: https://blog.csdn.net/bluewhalerobot/article/details/73649353 https://community.bwbot.org ...

  6. ORACLE视图简单创建和使用

    1.创建 create view v (pdate,goodsId,productionId,qty)列名 as select p.pdate,p.goodsId,p.productionId,sum ...

  7. oracle 优化方法总结

    分析和优化的基本步骤如下: 1.如果是SQL语句的写法问题,我们可以通过在不更改业务逻辑的情况下改写SQL来加以解决: 2.如果是不必要的全表扫描/排序而导致了目标SQL的性能问题,我们可以通过建立合 ...

  8. OpenGL创建一个三角形,并且颜色渐变(绿—>黑—>绿)

    学习自: https://learnopengl-cn.github.io/01%20Getting%20started/05%20Shaders/#_4 #include <glad/glad ...

  9. 组合,Mixin,类、类对象、实例对象

    1.组合,将几个横向关系的组合在一起.所谓的组合就是将类的实例化放到新类里面,那么就将旧类组合进去了. class Turtle: def __init__(self, x): # 注意 init 前 ...

  10. element ui 手动关闭$notify弹框

    1.需求: 当用户点击 “点击下载” 后,文件导出这个弹框主动消失. 2.解决方案: 如下图所示 (需要注意的是这里的关闭是 点击弹框任意处就会关闭,如果想实现我的需求需要判断一下即可)