• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > 详解如何使用vue-cli脚手架搭建Vue.js项目

详解如何使用vue-cli脚手架搭建Vue.js项目

作者:weiqinl 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue.js详解,vue.js路由详解,vue详解,vue 指令详解,vue.js脚手架等相关知识,weiqinl 希望在学习及工作中可以帮助到您

1. 前言

vue-cli 一个简单的构建Vue.js项目的命令行界面

整体过程:

$ npm install -g vue-cli 
$ vue init webpack vue-admin 
$ cd vue-admin 
$ npm install 
$ npm run dev 
</div>

后面分步说明。

2. 安装

前提条件,Node.js >=4.x版本,建议使用6.x版本。npm版本 > 3.x

全局安装vue-cli

$ npm install -g vue-cli 
</div>

3. 使用

 $ vue init <template-name> <project-name> 
</div>

vue官方提供了多个打包工具版本的模版。我们可以使用vue list命令查看,当前可以使用的模版。

$ vue list 
</div>

我们在这里,使用webpack模版。 功能齐全的webpack & vue-loader 提供热加载、代码检查、单元测试和css分离

$ vue init webpack vue-element-admin
</div>

之后,在E:\project文件夹下面,会有刚初始化的构建的项目vue-element-admin

4. 运行结果

项目基础结构已经搭建好了,现在来启动它。

进入项目文件:

$ cd vue-element-admin 
</div>

安装依赖:

中国行情原因,直接安装,有时候会失败。我们一般使用npm的淘宝镜像cnpm。

先安装cnpm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
</div>

之后,使用:

$ cnpm install
</div>

你直接安装也可以的:

$ npm install 
</div>

运行:

$ npm run dev
</div>

启动之后,自动打开默认浏览器

之后,就可以进行本地开发,实时预览开发效果。

5. 打包部署

项目开发完成之后,可以使用npm run build进行打包工作

$ npm run build
</div>

打包完成之后,会生成dist文件夹,项目上线时候,只需要将dist文件夹放到服务器就行了。

6. 项目结构

</div>

您可能想查找下面的文章:

  • 详解Vue使用命令行搭建单页面应用
  • 详解如何使用vue-cli脚手架搭建Vue.js项目
  • vue v-on监听事件详解
  • Vue声明式渲染详解
  • 详解使用vue脚手架工具搭建vue-webpack项目
  • Vue 进阶教程之v-model详解
  • vue.js之vue-cli脚手架的搭建详解
  • 详解Vue中使用v-for语句抛出错误的解决方案
  • Vue自定义图片懒加载指令v-lazyload详解
  • 详解Vue 普通对象数据更新与 file 对象数据更新

相关文章

  • 2017-05-30详解vue的数据binding绑定原理
  • 2017-05-30简单理解vue中Props属性
  • 2017-05-30vue动态生成dom并且自动绑定事件
  • 2017-05-30详解vue.js2.0父组件点击触发子组件方法
  • 2017-05-30Vue系列:通过vue-router如何传递参数示例
  • 2017-05-30Vue.js 和 MVVM 的注意事项
  • 2017-05-30Vue-resource实现ajax请求和跨域请求示例
  • 2017-07-22Vue.js前后端同构方案之准备篇——代码优化
  • 2017-05-30基于vue.js实现图片轮播效果
  • 2017-05-30Vue.js结合bootstrap实现分页控件

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解vue-Resource(与后端数据交互)
    • 源码分析Vue.js的监听实现教程
    • Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
    • 详解Vue监听数据变化原理
    • 简单理解Vue条件渲染
    • vuejs如何配置less
    • 很棒的vue弹窗组件
    • vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
    • Vue60分钟webpack项目模板快速入门
    • vue中如何引入jQuery和Bootstrap

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有