一、安装

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. jQuery的JS库在本地运行项目时提示无法加载

    最近公司有个项目在我本地运行时引用本地的jquery.js,浏览器提示无法加载 <script src="/js/newperson/jquery-1.11.3.min.js" ...

  2. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  3. MyBatis核心接口和类

    SqlSessionFactoryBuilder: SqlSessionFactoryBuilder负责构建SqlSessionFactory.它的最大特点是:用过即丢.一旦创建了SqlSession ...

  4. python中除法的注意事项

    使用python数据处理,代码如下: import numpy as np fs = 5 ts = np.arange(-1,1+1/fs,1/fs) 发现了这样一个错误: Traceback (mo ...

  5. Docker - 国内镜像的配置及使用

    Docker国内镜像 DaoCloud - Docker加速器 阿里云 - 开发者平台 微镜像 - 希云cSphere 网易蜂巢 阿里云的Docker加速器 阿里云 - 开发者平台:https://d ...

  6. [EXP]Apache Superset < 0.23 - Remote Code Execution

    # Exploit Title: Apache Superset < 0.23 - Remote Code Execution # Date: 2018-05-17 # Exploit Auth ...

  7. “大话架构”阿里架构师分享Java程序员需要突破的技术要点

    一.源码分析 源码分析是一种临界知识,掌握了这种临界知识,能不变应万变,源码分析对于很多人来说很枯燥,生涩难懂. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 我认为是阅读源码的最核心 ...

  8. 第三章 服务治理:Spring Cloud Eureka

    Spring Cloud Eureka是Spring Cloud Netflix 微服务套件中的一部分,它基于Netflix Eureka做了二次封装,主要负责完成微服务架构中的服务治理功能.Spri ...

  9. Shell脚本 | 截取包名

    之前写 shell 脚本的几篇文章都是先大致介绍脚本的功能和写法,然后一股脑的给出完整的代码.并没有细致入微的解释脚本中的每一行是如何思考如何编写的. 今天反其道而行之,只介绍一行代码.争取能讲的清楚 ...

  10. C语言第九讲,结构体

    C语言第九讲,结构体 一丶结构体的定义 在C语言中,可以使用结构体(Struct)来存放一组不同类型的数据.结构体的定义形式为: struct 结构体名{ 结构体所包含的变量或数组 }; 结构体是一种 ...