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. [转]Understanding OpenStack Authentication: Keystone PKI

    The latest stable release of OpenStack, codenamed Grizzly, revolutionizes the way user authenticatio ...

  2. Go语言数组和切片的原理

    目录 数组 创建 访问和赋值 切片 结构 初始化 访问 追加 拷贝 总结 数组和切片是 Go 语言中常见的数据结构,很多刚刚使用 Go 的开发者往往会混淆这两个概念,数组作为最常见的集合在编程语言中是 ...

  3. [Swift]LeetCode350. 两个数组的交集 II | Intersection of Two Arrays II

    Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...

  4. 巡风源码阅读与分析---AddPlugin()方法

    文件位置:view/view.py AddPlugin() # 新增插件异步 @app.route('/addplugin', methods=['get', 'post']) @logincheck ...

  5. iOS学习——图片压缩到指定大小以内

    一.图片压缩简述 在我们开发过程中,有可能会遇到拍照.或者从相册中选择图片,要么单选或者多选,然后上传图片到服务器,一般情况下一张图片可能3-4M,如果类似微信朋友圈上传9张图片大约是 35M左右,如 ...

  6. JavaWeb过滤器.监听器.拦截器-原理&区别-个人总结

    对比项 拦截器 过滤器 机制 反射机制 函数回调 是否依赖servlet容器 是 否 请求处理 只能对action请求起作用 几乎所有的请求起作用 对action处理 可以访问action上下文.值栈 ...

  7. Android版本号列表

    Android版本号列表

  8. CDN边缘节点容器调度实践(上)

    又拍云容器云是基于 Docker 的分布式计算资源网,节点分散在全国各地及海外,提供电信.联通.移动和多线网络,融合微服务.DevOps 理念,满足精益开发.运维一体化,大幅降低分布式计算资源构建复杂 ...

  9. NPM 安装速度慢,镜像修改

    今天安装gitbook的时候,竟然花了两个小时没有安装成功,大家在使用npm安装依赖的时候速度是不是经常慢的要死?最佳解决方案是手动更改镜像服务器地址, 强烈推荐阿里巴巴在国内的镜像服务器,执行下面命 ...

  10. python入门学习记录(win7+python3.6)

    1. pip freeze 可以查看安装的模块信息 2. 查看某个模块是否已经安装了 conda(pip) search <moduleName>.图一显示为未安装,图二显示为已经安装