前言

vue-cli是Vue官方提供的命令行工具,可用于快速搭建大型单页应用。集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。建议先熟悉 Vue 本身之后再研究 CLI。
使用之前需要对 Node.js 和相关构建工具有一定程度的了解。

安装

先决条件:Node.js(> = 4.x,6.x首选),npm版本3+和Git。

注:建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度。
npm config set registry https://registry.npm.taobao.org //更换国内淘宝的镜像
注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

全局安装vue-cli
npm install -g vue-cli

创建项目

了解官方模板

Vue官方为我们提供了几种模板,方便我们进行快速开发。根据需要选择适合自己的模板。
当前可用的模板包括:
webpack - 一个全功能的Webpack + vue-loader设置,具有热重新加载,linting,测试和css提取。
webpack-simple - 一个简单的Webpack + vue-loader设置,用于快速原型制作。
browserify -全功能Browserify + vueify设置用热重装载,掉毛&单元测试。
browserify -simple - 一个简单的Browserify + vueify设置,用于快速原型制作。
pwa - 基于webpack模板的vue-cli的PWA模板
simple - 单个HTML文件中最简单的Vue设置

提取模板创建项目

安装完vue-cli脚手架之后,我们就可以开始创建自己的项目。
用法vue init < template-name > < project-name >
使用方法vue init webpack my-project
上述命令从vuejs-templates / webpack中提取模板,提示输入一些信息,并在其中生成项目./my-project/。
命令输入完成后敲回车,此时会自动下载template模板,稍微等待一会,会让你按提示完成项目的创建,如下图

当然这些都看你自己的爱好了。
最后生成 Vue.js 的webpack 项目

命令输入完成后敲回车,此时会自动下载template模板,稍微等待一会,会让你按提示完成项目的创建,如下图

当然这些都看你自己的爱好了。

安装依赖

项目创建完成之后可以看到目录结构如下

接下来使用命令行工具
cd vuedemo//CD我的项目
npm install//NPM安装依赖

可以在项目目录里直接安装,是因为有package.json这个文件,里面包含了需要安装的包的名称。安装完成后,可以在目录中发现多出了node_modules这个文件夹,里面为下载的依赖。

运行项目

使用命令行工具cmd,到项目所在目录下,输入npm run dev,回车,启动项目
到此项目已经搭建完成,便可以在D:vuedemosrc目录下进行开发

项目打包

运行npm run build
运行后打包成功会在项目中生成dist文件夹
部署服务器是把文件夹中的文件丢上服务器即可

vue-cli开发-搭建项目(一)的更多相关文章

  1. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  2. vue cli创建typescript项目

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

  3. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  4. Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案(以Apache为例)

    vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...

  5. vue教程3-webpack搭建项目

    vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...

  6. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  7. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

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

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

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

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

随机推荐

  1. The Preliminary Contest for ICPC China Nanchang National Invitational

    目录 Contest Info Solutions A. PERFECT NUMBER PROBLEM D. Match Stick Game G. tsy's number H. Coloring ...

  2. spark map函数中使用println无法输出

    问题 // 每个点为hardData中的一个Array val hardData = spark.read.textFile(args(0)).rdd .map(_.split(" &quo ...

  3. 在Ubuntu Server上使用vtk处理体数据,直接得到渲染结果图片避免显示窗口

    概述 需要调用vtk对体数据进行渲染处理,处理结果直接存为图片而不通过窗口显示. 直接使用vtkRenderWindow加上vtkWindowToImageFilter类写入,在调用渲染的过程中会出现 ...

  4. 小程序 image跟view标签上下会有间隙

    图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距 我是使用: 加上这个消除了间隙,如果没有解决,你可以分别用 vertical-align:t ...

  5. OpenFOAM中的基本变量快速认知【转载】

    转载自:http://blog.sina.com.cn/s/blog_a0b4201d0102vsf9.html label 实际上就是整型数据的变体,int,OF对它进行了包装,以适应32或64位系 ...

  6. WORD转HTML-python第三方包Mammoth(官方文档翻译)

    Mammoth 官方 Mammoth可用于将.docx文档(比如由Microsoft Word创建的)转换为HTML.Mammoth致力于通过文档中的语义信息生成简洁的HTML,而忽略一些其他细节.例 ...

  7. 一个项目里,httpclient竟然出现了四种

    有网友提问: 今年年初,到一家互联网公司实习,该公司是国内行业龙头.不过技术和管理方面,却弱爆了.那里的程序员,每天都在看邮件,查问题工单.这些问题,多半是他们设计不当,造成的.代码写

  8. python 设计模式之迭代器模式

    #写在前面 真的有一大把年纪了,回头看看, 明明也很努力,却发现自己穷的一无所有,昨夜的事更是让我眼泪止不住的流,眼睛也肿了,委屈的愣是说不出一个字.前面荆棘丛生,身后已无退路,生活一地鸡毛,糟糕的一 ...

  9. 机器学习 - 算法 - 聚类算法 K-MEANS / DBSCAN算法

    聚类算法 概述 无监督问题 手中无标签 聚类 将相似的东西分到一组 难点 如何 评估, 如何 调参 基本概念 要得到的簇的个数  - 需要指定 K 值 质心 - 均值, 即向量各维度取平均 距离的度量 ...

  10. RVCT编译错误 Cannot obtain license for Compiler

    找不到文件 找不到文件 Error: C9932E: Cannot obtain license for Compiler (feature compiler) with license versio ...