脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli搭建vue-webpack项目

使用vue-cli脚手架工具搭建vue-webpack项目

 更新时间：2019年01月14日 10:33:41   作者：TJYoung  
这篇文章主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目，通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值，需要的朋友可以参考下

最近更新了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 webpackyourprojectname(项目名)

中间会输入项目名称，项目描述，作者等信息；

一路回车

可以看到我们刚才创建的webpack项目已经建好了：

4.查看目录结构

安装依赖

$ npm install

国内有些包npm无法安装，可以使用cnpm安装

$ cnpm install

5.启动本地开发

本地node服务器已经跑起来了，端口为配置文件中的端口

6.配置路由

创建新的页面组件，将路由指向该.vue 文件

到此，使用vue-cli创建的vue项目基本可以上手开发了，恭喜！

7.打包上线

$ npm run build

看到build complete，证明打包成功；

观察目录结构，发现多了一个dist文件夹，这便是webpack打包后的文件，将改文件和后台商量，以什么形式放到服务器即可，上线成功。

啦啦啦~ 至此，我们vue项目算是初步跑起来了，后续会详解webpack配置，以及本地mock数据开发等文章，欢迎大家批评指正！也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 前端实现不同角色登入展示不同页面效果实例

    前端实现不同角色登入展示不同页面效果实例

    要实现不同角色登录跳转不同的前端页面,可以在登录成功后,根据用户的角色信息,使用路由跳转到不同的页面,这篇文章主要给大家介绍了关于前端实现不同角色登入展示不同页面效果的相关资料,需要的朋友可以参考下
    2024-08-08
  • 基于vue2.0+vuex+localStorage开发的本地记事本示例

    基于vue2.0+vuex+localStorage开发的本地记事本示例

    这篇文章主要介绍了基于vue2.0+vuex+localStorage开发的本地记事本示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • uniapp+Vue3 组件之间的传值方法示例详解

    uniapp+Vue3 组件之间的传值方法示例详解

    文章主要介绍了父子传值、兄弟传值和provide/inject三种在Vue中进行组件间通信的方法,感兴趣的朋友跟随小编一起看看吧
    2025-03-03
  • 前端Vue全屏screenfull通用解决方案及原理详细分析

    前端Vue全屏screenfull通用解决方案及原理详细分析

    这篇文章主要给大家介绍了关于前端Vue全屏screenfull通用解决方案及原理的相关资料,使用screenfull这一第三方库可以实现更稳定的全屏功能,需要的朋友可以参考下
    2024-10-10
  • 手把手教你将vue前端和python脚本使用electron打包成桌面应用程序

    手把手教你将vue前端和python脚本使用electron打包成桌面应用程序

    这篇文章主要介绍了如何将Vue项目和Python脚本打包,并将打包后的文件部署到Vue项目中,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • Vue中的Ajax 配置代理slot插槽的方法详解

    Vue中的Ajax 配置代理slot插槽的方法详解

    这篇文章主要介绍了Vue中的Ajax 配置代理 slot插槽的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • Vue3纯前端实现Vue路由权限的方法详解

    Vue3纯前端实现Vue路由权限的方法详解

    这篇文章主要给大家介绍了关于Vue3纯前端实现Vue路由权限的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用Vue3具有一定的参考学习价值,需要的朋友可以参考下
    2022-05-05
  • setup+ref+reactive实现vue3响应式功能

    setup+ref+reactive实现vue3响应式功能

    这篇文章介绍了通过setup+ref+reactive实现vue3响应式功能，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • Vue+Antv F2实现层叠柱状图

    Vue+Antv F2实现层叠柱状图

    这篇文章主要为大家详细介绍了Vue+Antv F2实现层叠柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 前端虚拟列表实现的思路及完整代码

    前端虚拟列表实现的思路及完整代码

    这篇文章主要介绍了前端虚拟列表实现的思路及完整代码,虚拟列表是一种优化长列表性能的技术,通过只渲染可视区域的列表项来提升页面性能和用户体验,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01

最新评论