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. 如何修改image文件

    方法一:mount成为一个loop device 参考http://smilejay.com/2012/08/mount-an-image-file/ 方法一:找出分区开始的开始位置,使用mount命 ...

  2. zepto与jquery冲突的解决

    一般是不会把zepto和jquery一起来用的.但有时候要引入一些插件,可能就会遇到这样的问题. jquery noConflict() jquery有一个方法叫noConflict() ,可以把jq ...

  3. 美团App用户界面分析

    关于美团 美团网成立于2010年,合并前是中国销售额最大的独立团购 App.美团网2014年全年交易额突破460亿元,较去年增长180%以上,市场份额占比超60%,用户数超2亿~ 美团 App 用户界 ...

  4. [Swift]LeetCode124. 二叉树中的最大路径和 | Binary Tree Maximum Path Sum

    Given a non-empty binary tree, find the maximum path sum. For this problem, a path is defined as any ...

  5. [Swift]LeetCode740. 删除与获得点数 | Delete and Earn

    Given an array nums of integers, you can perform operations on the array. In each operation, you pic ...

  6. [Swift]LeetCode838. 推多米诺 | Push Dominoes

    There are N dominoes in a line, and we place each domino vertically upright. In the beginning, we si ...

  7. djang-异步——定时操作

    django本身是一个同步框架,flask也是,所以要把它变成异步操作的话还得专门设置一下 我的这个系统呢是windows系统,python3.7的 所以有的库是不可以兼容的 ,然后到时候会稍微修改一 ...

  8. python之读取配置文件模块configparser(三)高级使用---非标准配置文件解析

    非标准配置文件也是经常使用的,如何使用configparser来解析? 这要从configparser本身解析结构来说,configparser包含section和option,非标准配置文件只有op ...

  9. 文本编辑器激活系列(二):UltraEdit安装、激活、汉化教程

    如您激活出现问题,请点击这里加入:软件激活问题解决群 前言 推荐几款文本编辑器: Sublime:内嵌python解释器.大量插件 EditPlus:语法着色.内嵌浏览器 Notepad++:所见即所 ...

  10. 3.MySQL(三)

    索引类型 先创建表 mysql> CREATE TABLE test( -> id INT, -> username VARCHAR(16), -> city VARCHAR( ...