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. [安卓] 20、基于蓝牙BLE的广播包高频快速搜索

    前言: 之前介绍过很多蓝牙beacon.搜索.连接.通讯的文章.不过最近我发现:之前写的蓝牙广播包搜索的工程,搜索频率太慢,而且不能一直保持搜索状态.因此,这里探讨下高频蓝牙广播包扫描 -- 蓝牙BL ...

  2. 安卓开发学习笔记(四):Android Stuidio无法实现隐式Intent是为什么?

    一.首先检查我们的代码: FirstActivity.java(主活动程序当中的代码):Button3监听器后面的代码就是我们隐式Intent的业务逻辑所在了,大家可以往下面看看,大概在代码的第57行 ...

  3. 【原创开源应用第5期】基于RL-USB+RL-FlashFS的外挂U盘解决方案

    说明:1.RL-USB外挂U盘的例子,最近太多网友咨询,再不做一个例子就说不过去了.此例子为此而生.2.RTX及其所有中间件基本都做例子了,就差这个USB Host功能了,这次算是补上,所有功能基本已 ...

  4. 一个月薪两万的Web安全工程师要掌握哪些技能?

    作为一个薪水两万起步的工作,我想知道这些牛人们都会哪些技能呢? Web安全相关概念.熟悉渗透相关工具.渗透实战操作.关注安全圈动态.熟悉Windows/Kali Linux.服务器安全配置.脚本编程学 ...

  5. [Swift]LeetCode305. 岛屿的个数 II $ Number of Islands II

    A 2d grid map of m rows and n columns is initially filled with water. We may perform an addLand oper ...

  6. [Swift]LeetCode898. 子数组按位或操作 | Bitwise ORs of Subarrays

    We have an array A of non-negative integers. For every (contiguous) subarray B = [A[i], A[i+1], ..., ...

  7. spring-cloud-sleuth+zipkin源码探究

    1. spring-cloud-sleuth+zipkin源码探究 1.1. 前言   粗略看了下spring cloud sleuth core源码,发现内容真的有点多,它支持了很多类型的链路追踪, ...

  8. tensorflow、cuda、cudnn之间的版本对应关系

    原文链接 tensorflow-gpu v1.9.0 | cuda9.0 |  cuDNN7.1.4可行  | 备注:7.0.4/ 7.0.5/ 7.1.2不明确 tensorflow-gpu v1. ...

  9. slice全解析

    slice全解析 昨天组内小伙伴做分享,给出了这么一段代码: package main import ( "fmt" ) func fun1(x int) { x = x + 1 ...

  10. 【朝花夕拾】Android性能篇之(三)Java内存回收

    在上一篇日志([朝花夕拾]Android性能篇之(二)Java内存分配)中有讲到,JVM内存由程序计数器.虚拟机栈.本地方法栈.GC堆,方法区五个部分组成.其中GC堆是一块多线程的共享区域,它存在的作 ...