1. 安装nodejs

2. 安装 vue-cli

npm install -g vue-cli

安装前可以通过设置代理为淘宝仓库地址,以加快下载速度。

npm config set registry https://registry.npm.taobao.org 

3. 查看 Vue 版本

vue --version

4. 初始化 vue webpack 项目

vue init webpack  demoproject

vue init 为vue-cli 初始化项目命令,webpack 为模板类型,demoproject 为项目名称。

可以通过 vue list 查看支持的模板类型,如下图所示:

如下图为初始化项目执行过程:

命令执行完成,如果没有错误,则项目已经成功构建,接下来就可以进行自己的编码工作了。

如下图所示为项目初始化完成后目录结构:

5. 启动项目

npm run dev

如下图所示,初始化项目完成后,命令行有提示信息。

使用vue-cli 初始化 vue 项目的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. [Vue CLI 3] vue inspect 的源码设计实现

    首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...

  3. Vue CLI及其vue.config.js(一)

    有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...

  4. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  5. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  6. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  7. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  8. vue+element初始化创建项目

    初始化 步骤1:选择开发框架并创建 步骤1:vue create shop   回车步骤2:安装方式选择第二个自定义步骤3:安装模块: (*) Babel ( ) TypeScript ( ) Pro ...

  9. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  10. Vue Cli 3.x项目如何部署到IIS子站点下

    Vue Router在IIS下的部署参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB% ...

随机推荐

  1. php.ini中文翻译版--转载

    ;;;;;;;; ; 警告 ; ;;;;;;;;;;; ; 此配置文件是对于新安装的PHP的默认设置. ; 默认情况下,PHP使用此配置文件安装 ; 此配置针对开发目的,并且*不是*针对生产环境 ; ...

  2. 高性能网络服务器编程:为什么linux下epoll是最好,Netty要比NIO.2好?

    基本的IO编程过程(包括网络IO和文件IO)是,打开文件描述符(windows是handler,java是stream或channel),多路捕获(Multiplexe,即select和poll和ep ...

  3. Animator 动画第一次播放正常,之后播放都不正常的问题解决

    Animator 动画第一次播放正常,之后播放都不正常的问题解决 问题描述 第一次点击图片动画播放正常,在点击文字之后,图片没有显示出来,点击空白,播放动画,显示文字. 写了一个卡片翻转的动画,代码如 ...

  4. C++ Opencv remap()重映射函数详解及使用示例

    一.重映射及remap()函数介绍 重映射,就是把一幅图像中某位置的像素放置到另一图像指定位置的过程.即: 在重映射过程中,图像的大小也可以同时发生改变.此时像素与像素之间的关系就不是一一对应关系,因 ...

  5. [Swift]LeetCode143. 重排链表 | Reorder List

    Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You may not mod ...

  6. [Swift]LeetCode1030. 距离顺序排列矩阵单元格 | Matrix Cells in Distance Order

    We are given a matrix with R rows and C columns has cells with integer coordinates (r, c), where 0 & ...

  7. Spring Data Jpa接口简介

    Repository接口 public interface Repository<T, ID> {....} 提供了按方法名称的查询方式: 提供了@Query的查询方式 可能遇到的错误: ...

  8. hdfs创建删除文件和文件夹

    在 hadoop 中,基于 Linux 命令可以给 hdfs 创建文件和文件夹,或者删除文件和文件夹 创建文件的命令为: hadoop fs -touch /file.txt 创建文件夹的命令为: h ...

  9. Web系统大规模并发:电商秒杀与抢购-----面试必问

    一.大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战.如果Web系统不做针对性的优化,会轻而易举地陷入到异常状态.我们现在 ...

  10. C++版 - 剑指offer 面试题23:从上往下打印二叉树(二叉树的层次遍历BFS) 题解

    剑指offer  面试题23:从上往下打印二叉树 参与人数:4853  时间限制:1秒  空间限制:32768K 提交网址: http://www.nowcoder.com/practice/7fe2 ...