vue.js的手脚架vue-cli项目搭建的步骤

手脚架是什么？

众所周知，现在的前端项目发展得越渐越大，我们前端程序员要从0开始去搭建一套完整的项目很费时，所以这时候前端工程的手脚架就出现了。

我用得vue-cli也是其中之一，还有其他的我也说不清，我就说一下我接触比较多的这款vue-cli，

但是所有手脚架的核心：都是为了能够快速搭建一个完整的项目的结构，开发者只需要在生成的项目结构的基础上进行开发即可，非常简单高效。

然后， vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的模板（存放在不同的服务器上）复制到本地作为项目初始结构， 官网给出了两个模板： webpack-simple 和 webpack 两种。

两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了。

我用的是wbpack这个。

关于自己是否能搭建一套手脚架，这个是肯定的，只有自己写好模板，放在github上就OK了。在以后的项目搭建就可以使用自己搭建的手脚架了。

vue-cli的使用

在这里，由于我使用的代码编辑器是vs code，所以我就按着vs code的界面来展示；

下面讲到其他命令在其他的带有终端的代码编辑器也可以使用

第一步：安装vue-cli

npm install -g vue-cli

安装完成后，可以通过命令

vue list 查看有哪些模板可以调用；

第二步：搭建项目目录

命令格式：vue init <template-name> <project-name>

<template-name>：指上方的众多模板；

<project-name>： 指自己项目的名称；

例如：我使用的是webpack这个模板：  vue init webpack vuetest

第三步：安装依赖

进入新建立的文件夹里面：

命令格式：cd vuetest

在文件夹里面去安装依赖

命令格式：npm install

注意：

不用使用cnpm 淘宝这包管理器来安装依赖，这样会缺失比较多的东西；

虽然用npm去下载依赖很慢，毕竟连的是国外的链接；

下面是以来所在的地方：

第四步：直接运行

命令格式：npm run dev

直接在终端里面输入这段命令就OK了；

默认是本地的8080端口：

到这里已经OK了!

使用webpage模板搭建的vue项目目录就OK了；

注意：

在运行 npm run  dev 中可以使用  cnpm run dev 来代替。

其中

安装cnpm

命令 npm install -g cnpm --registry=https://registry.npm.taobao.org

其他用法和npm差不过。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js系列之项目搭建(1)

    Vue.js系列之项目搭建(1)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误. 今天要讲讲Vue2.0了.最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩

  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

  • 初识 Vue.js 中的 *.Vue文件

    初识 Vue.js 中的 *.Vue文件

    什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 什么是*.vue文件 首先,我们用 vue-cli

  • springCloud项目搭建流程步骤分解

    springCloud项目搭建流程步骤分解

    实现跨服务的远程调用(RestTemplate) 业务场景:在返回订单信息数据中显示用户信息 实现思路:基于RestTemplate发起的http请求实现远程调用 1.注册RestTemplate //在order-service的启动类中注册RestTemplate的Bean @Bean public RestTemplate restTemplate(){ return new RestTemplate(); } 2.改造OrderController 2.1:注入RestTemplate

  • vue.js的手脚架vue-cli项目搭建的步骤

    vue.js的手脚架vue-cli项目搭建的步骤

    手脚架是什么? 众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了. 我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli, 但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效. 然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的

  • 基于mpvue的小程序项目搭建的步骤

    基于mpvue的小程序项目搭建的步骤

    前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast

  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • 使用 vue.js 构建大型单页应用

    使用 vue.js 构建大型单页应用

    前置条件: 熟悉使用 Javascript + HTML5 + css3. 理解 ES2015 Module 模块(export.import.export-default). 了解 nodejs 基础知识,npm 常用命令,以及 npm script 使用 (vue 项目中使用 npm 进行包管理). 了解 webpack 打包工具 (常用配置选项以及 loader 概念).(webpack webpack.github.io/ 是一个模块打包工具.它将一堆文件中的每个文件都作为一个模块,找出

  • Mint UI 基于 Vue.js 移动端组件库

    Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • vue.js开发环境安装教程

    vue.js开发环境安装教程

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula

  • vue.js的安装方法

    vue.js的安装方法

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula

随机推荐