vue-cli开发-搭建项目(一)
前言
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开发-搭建项目(一)的更多相关文章
- VUE CLI环境搭建文档
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案(以Apache为例)
vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...
- vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
随机推荐
- 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 ...
- spark map函数中使用println无法输出
问题 // 每个点为hardData中的一个Array val hardData = spark.read.textFile(args(0)).rdd .map(_.split(" &quo ...
- 在Ubuntu Server上使用vtk处理体数据,直接得到渲染结果图片避免显示窗口
概述 需要调用vtk对体数据进行渲染处理,处理结果直接存为图片而不通过窗口显示. 直接使用vtkRenderWindow加上vtkWindowToImageFilter类写入,在调用渲染的过程中会出现 ...
- 小程序 image跟view标签上下会有间隙
图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距 我是使用: 加上这个消除了间隙,如果没有解决,你可以分别用 vertical-align:t ...
- OpenFOAM中的基本变量快速认知【转载】
转载自:http://blog.sina.com.cn/s/blog_a0b4201d0102vsf9.html label 实际上就是整型数据的变体,int,OF对它进行了包装,以适应32或64位系 ...
- WORD转HTML-python第三方包Mammoth(官方文档翻译)
Mammoth 官方 Mammoth可用于将.docx文档(比如由Microsoft Word创建的)转换为HTML.Mammoth致力于通过文档中的语义信息生成简洁的HTML,而忽略一些其他细节.例 ...
- 一个项目里,httpclient竟然出现了四种
有网友提问: 今年年初,到一家互联网公司实习,该公司是国内行业龙头.不过技术和管理方面,却弱爆了.那里的程序员,每天都在看邮件,查问题工单.这些问题,多半是他们设计不当,造成的.代码写
- python 设计模式之迭代器模式
#写在前面 真的有一大把年纪了,回头看看, 明明也很努力,却发现自己穷的一无所有,昨夜的事更是让我眼泪止不住的流,眼睛也肿了,委屈的愣是说不出一个字.前面荆棘丛生,身后已无退路,生活一地鸡毛,糟糕的一 ...
- 机器学习 - 算法 - 聚类算法 K-MEANS / DBSCAN算法
聚类算法 概述 无监督问题 手中无标签 聚类 将相似的东西分到一组 难点 如何 评估, 如何 调参 基本概念 要得到的簇的个数 - 需要指定 K 值 质心 - 均值, 即向量各维度取平均 距离的度量 ...
- RVCT编译错误 Cannot obtain license for Compiler
找不到文件 找不到文件 Error: C9932E: Cannot obtain license for Compiler (feature compiler) with license versio ...