详解如何使用vue-cli脚手架搭建Vue.js项目
更新时间：2017年05月19日 08:25:07 作者：weiqinl
这篇文章主要介绍了详解如何使用vue-cli脚手架搭建Vue.js项目 ,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1. 前言
vue-cli 一个简单的构建Vue.js项目的命令行界面
整体过程：
$ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev
后面分步说明。
2. 安装
前提条件，Node.js >=4.x版本，建议使用6.x版本。npm版本 > 3.x
全局安装vue-cli
$ npm install -g vue-cli
3. 使用
$ vue init <template-name> <project-name>
vue官方提供了多个打包工具版本的模版。我们可以使用vue list命令查看，当前可以使用的模版。
$ vue list
我们在这里，使用webpack模版。 功能齐全的webpack & vue-loader 提供热加载、代码检查、单元测试和css分离
$ vue init webpack vue-element-admin
之后，在E：\project文件夹下面，会有刚初始化的构建的项目vue-element-admin
4. 运行结果
项目基础结构已经搭建好了，现在来启动它。
进入项目文件:
$ cd vue-element-admin
安装依赖：
中国行情原因，直接安装，有时候会失败。我们一般使用npm的淘宝镜像cnpm。
先安装cnpm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
之后，使用:
$ cnpm install
你直接安装也可以的：
$ npm install
运行：
$ npm run dev
启动之后，自动打开默认浏览器
之后，就可以进行本地开发，实时预览开发效果。
5. 打包部署
项目开发完成之后，可以使用npm run build进行打包工作
$ npm run build
打包完成之后，会生成dist文件夹，项目上线时候，只需要将dist文件夹放到服务器就行了。
6. 项目结构
相关文章
这篇文章主要介绍了基于Vue3和Plotly.js实现交互式3D图,本代码旨在为数据可视化提供一个交互式图表,允许用户动态控制图表中线条的颜色和可见性,此功能对于探索大型数据集或突出特定数据子集非常有用,需要的朋友可以参考下2024-07-07
本文主要介绍了Vue后台管理系统之实现分页功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要为大家详细介绍了vue实现表单数据的增删改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍Vue axios和vue-axios关系，感兴趣的朋友一起看看吧2022-08-08
vue使用el-table 添加行手动填写数据和删除行及提交保存功能
遇到这样的需求点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存,怎么实现的呢,下面通过实例代码给大家详细讲解,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vue3 elementPlus部分组件样式修改的方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-01-01
最近好几个vue项目都是用ivew作为UI框架,所以下面这篇文章主要给大家介绍了关于如何利用vue3 + threejs仿iView官网大波浪特效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了element-ui 中的table的列隐藏问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue ElementUI实现异步加载树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
教你在Vue3中使用useStorage轻松实现localStorage功能
这篇文章主要给大家介绍了关于如何在Vue3中使用useStorage轻松实现localStorage功能的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
最新评论