一、安装

VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍。

1. 安装(默认你的电脑上已安装node及npm)

npm install -g @vue/cli

2. 检查版本

vue --version

二、创建项目 (用的cmd工具)

1. 利用 cd 指令进入到指定目录,即你的项目想放在哪个地方就进入到哪个目录里面

2. 创建项目,通过指令: vue create projectname    (说明: projectname 为你的项目名称,必须小写字母)

3. 选择项目配置,配置会有3个选项:

  a. 常用预设 normal-preset

  b. 默认 default

  c. 手动选择 manually select features

根据自己的个人情况进行选择,我通常选择的 normal-preset。接下来就是自动安装,安装成功后会提示你进入到项目目录,并运行程序,如下:

到此项目就创建完了,进入到项目目录后,可以通过 npm run serve 运行看下,效果如下图:

编译成功后,在浏览器输入 http://localhost:8080/  查看效果

三、创建后的目录结构如下(用的vscode编辑器)

VUE CLI 3.0 安装及创建项目的更多相关文章

  1. vue-cli 3.0 安装和创建项目流程

    使用前我们先了解下3.0较2.0有哪些区别 一.3.0 新加入了 TypeScript 以及 PWA 的支持二.部分命令发生了变化: 1.下载安装  npm install -g vue@cli 2. ...

  2. 【Vue CLI】从安装到构建项目再到目录结构的说明

    目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...

  3. cocos2d-x 3.0 安装及创建项目

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/LanerGaming/article/details/24146921 好久没实用过cocos2d- ...

  4. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  5. vue安装及创建项目的几种方式

    原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式 VUE安装的方式 直接用 script标签 引入 对于制作原型或学习,你可以这样使用最新版本: ...

  6. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  7. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  8. Webpack指南(一):安装,创建项目,配置文件,开发环境以及问题汇总

    Webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gra ...

  9. 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因

    1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...

随机推荐

  1. IPv6技术详解:基本概念、应用现状、技术实践(下篇)

    本文来自微信技术架构部的原创技术分享. 1.前言 在上篇<IPv6技术详解:基本概念.应用现状.技术实践(上篇)>,我们讲解了IPV6的基本概念. 本篇将继续从以下方面展开对IPV6的讲解 ...

  2. fatal: protocol error: bad line length character: This

    昨晚尝试搭建一个Git服务器,在搭建好服务器后,在服务器创建了一个空项目,我在本地使用git clone 拉取项目时,报了fatal: protocol error: bad line length ...

  3. 锚接口(下)——html5的history api

    概述 虽然html5的history api是H5专门用来解决记录历史记录和单页面的方法,但是很多老式的浏览器并不支持它,所以一般遇到老式的浏览器会做一个polyfill使用之前的hashchange ...

  4. Java学习笔记43(打印流、IO流工具类简单介绍)

    打印流: 有两个类:PrintStream,PrintWriter类,两个类的方法一致,区别在于构造器 PrintStream:构造方法:接收File类型,接收字符串文件名,接收字节输出流(Outpu ...

  5. LabVIEW(十):数组和簇

    一.数组 1.创建数组 (1).前面板右键>“数组.矩阵与簇”>数组. (2).前面板右键>(选择要添加的数组数据类型,比如创建数值数组)数值>将“数值输入控件”拖入数组中. ...

  6. rabbitmq基础学习+springboot结合rabbitmq实现回调确认confirm

    rabbitmq集群docker快速搭建 https://blog.csdn.net/u011058700/article/details/78708767 rabbitmq原理博客 https:// ...

  7. Shell - Shell脚本调试方法

    Shell脚本调试选项 Shell本身提供一些调试方法选项: -n,读一遍脚本中的命令但不执行,用于检查脚本中的语法错误. -v,一边执行脚本,一边将执行过的脚本命令打印到标准输出. -x,提供跟踪执 ...

  8. 机器学习技法笔记:09 Decision Tree

    Roadmap Decision Tree Hypothesis Decision Tree Algorithm Decision Tree Heuristics in C&RT Decisi ...

  9. LeetCode:151_Reverse Words in a String | 字符串中单词的逆反 | Medium

    题目:Reverse Words in a String Given an input string, reverse the string word by word. For example, Gi ...

  10. Appium定位方式总结

    通过appium-desktop定位元素 ClassName Android Android的class属性对应ClassName定位方式,ClassName一般都是会重复的,可以通过index来获取 ...