【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目
最近更新了webpack配置详解,可移步vue-cli webpack详解
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>
标签,加上CDN的地址即可。但是,这并不算是一个完整的vue实际应用。在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目。
1.安装node环境
可以使用自带的终端cmd命令行工具;windows下推荐安装git bash,可以使用linux命令;
第一步检测是否安装node;没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/
安装成功后在命令行查看node版本,如果有说明安装成功。
2.安装vue脚手架工具vue-cli
大家在安装node的时候,会自动安装npm;
可以先行查看npm版本;
使用npm安装vue-cli:
npm install vue-cli -g
3.准备工作已经完毕,下面直接使用vue-cli初始化webpack项目;
vue init webpack yourprojectname(项目名)
中间会输入项目名称,项目描述,作者等信息;
一路回车
可以看到我们刚才创建的webpack项目已经建好了:
4.查看目录结构
安装依赖
$ npm install
国内有些包npm无法安装,可以使用cnpm安装
$ cnpm install
5.启动本地开发
npm run dev
本地node服务器已经跑起来了,端口为配置文件中的端口
6.配置路由
创建新的页面组件,将路由指向该.vue 文件
到此,使用vue-cli创建的vue项目基本可以上手开发了,恭喜!
7.打包上线
$ npm run build
看到build complete,证明打包成功;
观察目录结构,发现多了一个dist文件夹,这便是webpack打包后的文件,将改文件和后台商量,以什么形式放到服务器即可,上线成功。
啦啦啦~ 至此,我们vue项目算是初步跑起来了,后续会详解webpack配置,以及本地mock数据开发等文章,欢迎大家批评指正!
【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目的更多相关文章
- 脚手架工具搭建VUE应用
首先需要安装node.js,然后安装CLI工具. vue init webpack vue-lesson2 使用element组件的话,需要用到如下命令: cd vue-lesson2 vue add ...
- 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
- 脚手架快速搭建springMVC框架项目
apid-framework脚手架快速搭建springMVC框架项目 rapid-framework介绍: 一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮 ...
- 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- vue之cli脚手架安装和webpack-simple模板项目生成
ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...
- 使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- 安装 NodeJ Koa2、3 + 独立插件 cli脚手架 npm cnpm Vue
安装 NodeJ npm cnpm Koa2.3 + 独立插件 cli脚手架 Vue 安装 在 这里写过了 这两个分开了写 Nodej:下载 node.js 安装 10.0版 ...
- 脚手架方式搭建vue项目
一.首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了. 搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一 ...
- 利用官方的vue-cli脚手架来搭建Vue集成开发环境
在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...
随机推荐
- Gradle -- 初体验
Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的各种繁琐配置. ...
- poj1011 Sticks (dfs剪枝)
[题目描述] George took sticks of the same length and cut them randomly until all parts became at most 50 ...
- github提交用户权限被拒
场景介绍: 之前登陆了朋友的github账号,保存了朋友的GitHub信息在本地.今天想重新提交一个项目到自己的GitHub账号时,一直用朋友的账号提交且提示权限被拒. 解决: 方法一,GitHub配 ...
- SpringBoot中设置自定义拦截器
SpringBoot中设置自动以拦截器需要写一个类继承HandlerInterceptorAdapter并重写preHandle方法 例子 public class AuthorityIntercep ...
- mysql考试复习
基础创建 字段自动编号auto_increment ( 单词补充:increment 定期的加薪; 增量; 增加) 考点 添加自增 alter table [表名] modify [字段(id)] i ...
- python编程基础之简单购物车
#good文件夹内容[ ['Iphone7', 5800], ['Coffee', 30], ['疙瘩汤', 10], ['Python Book', 99], ['Bike', 199], ['Vi ...
- There is no Action mapped for namespace [/] and action name [TestAction] ass
1.修改action的name值 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE strut ...
- java 类加载及实例化的调用顺序
1.没有继承的情况 单独一个类的场景下,初始化顺序为依次为 静态变量和静态代码块(看两者的书写顺序),继承的基类的构造函数,成员变量,被调用的构造函数. 代码呈现: public class Test ...
- 2018-2-13-win-10-UWP-标签
title author date CreateTime categories win 10 UWP 标签 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:2 ...
- [Windows] GIF编辑器
目录 1. 功能简介 2. 下载地址 3. 使用教程 3.1. 其他视频转gif的方案 1. 功能简介 可以自定义录屏位置.区域大小做GIF 可以编辑GIF.压缩GIF等 可以将视频转换成GIF 可以 ...