vue2.0实战之使用vue-cli搭建项目（2）
Vue-cli是官方推荐的快速构建单页应用的脚手架。官方给的建议，如果你是初次尝试Vue，哪就老老实实用普通的书写引入js文件，这里牵扯太多的东西，例如webpack、npm、nodejs等等，很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的（官方构建建议）。一下是构建过程。
一、 安装 node.js
首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。
安装完成后，可以命令行工具中输入node -v和npm -v，如果能显示出版本号，就说明安装成功。
二、安装 vue-cli
安装好了 node，我们可以直接全局安装 vue-cli：
npm install -g vue-cli
因为各种不可描述的原因，使用npm安装会很慢，而且很容易出错，所以推荐使用cnpm来安装。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装成功后，使用 cnpm 安装 vue-cli 和 webpack。
cnpm install -g vue-cli
安装完成后，可以使用vue -V 查看是否安装成功。
三、生成项目
首先需要在命令行中进入到项目目录，然后输入：
vue init webpack Vue-demo
其中 webpack 是模板名称,Vue-demo 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。
配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖
cnpm install
然后启动项目
npm run dev
四、打包上线
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后，可以输入npm run build 来进行打包工作
npm run build
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将 dist 文件夹放到服务器就行了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue中动态添加class类名的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇vue-cli项目修改文件热重载失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue使用axios添加请求头方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue如何自定义封装API组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
详解windows下vue-cli及webpack 构建网站(三)使用组件
本篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(三)使用组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
基于Vue3+Three.js实现一个3D模型可视化编辑系统
这篇文章主要介绍了基于Vue3+Three.js实现一个3D模型可视化编辑系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
vue-quill-editor富文本编辑器上传视频功能详解
需求需要实现富文本的功能,同时富文本中还可以上传视频和图片,选来选去最后决定了用这个富文本编辑器,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器上传视频功能的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue3使用mitt进行组件通信的步骤，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-05-05
本文通过实例代码给大家介绍了vue 中swiper的使用，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
今天小编就为大家分享一篇vue中各选项及钩子函数执行顺序详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论