其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记。但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法。就算是在实际项目中也是以这样的方式,没有通过自动化工具来构建vue项目的经验。

新公司的项目是基于vue开发的,用到前端自动化工具,虽说没做过此类项目,但是对于node、webpack这些,之前自己也是玩儿过的,所以上手的话也是很快的,在这里就先简要地记录一下node构建vue项目的步骤吧(包含遇到的坑)。

温馨提示:我用的是cmder,不是系统自带的cmd。

一、准备工作

开始的话,下载node(可能需要手动配node环境变量),然后在下载的node根文件夹下通过npm安装webpack、vue-cli(vue脚手架工具),为求方便,这两个最好全局安装(-g);

二、构建vue项目

假设你已经完成了如上步骤,那么接下来,还是在node根目录下,一条命令创建vue项目:

上述n个问题,直接略过,直接回车,然后你的node根目录下回多出一个vue-pro(你自己起的项目名)文件夹,并且会自动下载项目依赖包。

三、项目跑起来

下完依赖之后,我们cd命令到项目文件夹下,并且启动项目:

然后通过webpack的编译,你就可以在浏览器访问你的项目了:

你也可以直接ctrl点击上述地址,直接访问项目,效果如下:

四、打包

写vue项目的时候,因为使用了自动化工具的缘故,文件看起来非常非常多,像下面这样:

涉及到很多的配置,看起来很让人头大,有组件、路由、入口文件、es6->es5、依赖包管理等等,但是,打包之后,就会出现熟悉的身影(这里有坑,先别急):

打包完毕,项目目录下会多出一个名为dist(名字可以自己配置的,默认配置名为dist)的文件夹,打开之后你会发现:

static文件夹下,就是images、js、css等静态资源文件,此时你双击index.html

五、打包的路径问题

双击之后,你会发现浏览器一片空白,惊喜不惊喜?刺激不刺激?哈哈哈哈!!!

F12一看,一堆错误,404,那就大概知道了,是打包时候的路径出错了,于是我们找到项目下的一个配置文件看看:

其实,问题就是出在这里了,绝对路径的话,打包之后自然从绝对路径找了,文件在C盘他就从C盘对应目录找,所以自然是找不到的,所以这里应当将"/"改成"./",这样就是相对于当前目录了,文件夹怎么移动都没事,依旧找得到!

自动化工具构建vue项目的更多相关文章

  1. 使用vue-cli构建工具构建vue项目时候组件的使用

    <template> <div class="contains"> <!-- <div class="main"> & ...

  2. vue基础 (三) 自动化工具(Vue CIL)

    一.自动化工具(Vue CIL) 安装过程 1. 先安装nvm 参考:https://www.jianshu.com/p/d0e0935b150a https://www.cnblogs.com/tj ...

  3. vue-cli快速构建vue项目模板

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.使用npm安装vue-cli 需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了 ...

  4. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  5. vue,一路走来(1)--构建vue项目

    2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...

  6. 使用nodeJs安装Vue-cli并用它快速构建Vue项目

    部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...

  7. Jenkins自动化构建vue项目然后发布到远程Linux服务器

    部署Jenkins参照另一篇博客: centos7安装Jenkins及其卸载 一.jenkins相关插件的安装 1.安装Publish Over SSH插件用于SSH连接远程的服务器. 登录 jenk ...

  8. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  9. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

随机推荐

  1. tRNA 二级结构预测可视化

    tRNAdb 收录了来自104个物种的623条tRNA 序列,从数据库中下载对应物种的tRNA 序列和二级结构,以人为例 打开下面的链接 http://trna.bioinf.uni-leipzig. ...

  2. Linux shell 学习

    ·详细介绍Linux shell脚本基础学习(一) ·详细介绍Linux shell脚本基础学习(二) ·详细介绍Linux shell脚本基础学习(三) ·详细介绍Linux shell脚本基础学习 ...

  3. Oracle之唯一性约束(UNIQUE Constraint)使用方法具体解释

    Oracle | PL/SQL唯一索引(Unique Constraint)使用方法 1 目标 用演示样例演示怎样创建.删除.禁用和使用唯一性约束. 2 什么是唯一性约束? 唯一性约束指表中一个字段或 ...

  4. 关于NaN(Not a Number)的问题

    在游戏运行时,代码若写得不安全很容易出现NAN的异常.一旦NAN出现整个游戏不崩溃也坏死掉了,游戏上了则是要被直接打回来的节奏,更是一个开发及测试人员每人都要扣3000块的大BUG.   一般表现为: ...

  5. TFS对签入文件忽略设置,解决pdb弹出警告

    我们在使用TFS项目老是出现冲突,要么编译的时候 提示PDB被签出这类的大量弹出,很烦人. 在群友的指点下,对签入文件进行限制.对PDB禁止签入以后,整个世界安静了.非常感谢 TFS=>服务器管 ...

  6. JQuery------jQuery.parseHTML()的使用方法

    代码: $(document).ready(function () { var data = jQuery.parseHTML("<p>你好</p>"); ...

  7. Strut2------配置环境

    1.导入必要的包 2.在src目录下新建struts.xml文件 <?xml version="1.0" encoding="UTF-8" ?> & ...

  8. GIS-009-Cesium 使用

    //加载ArcGIS 发布的地图服务MapServervar url='http://Jason:6080/arcgis/rest/services/SampleWorldCities/MapServ ...

  9. docker search 详解

    docker search 用于从 Docker Hub(https://hub.docker.com)中搜索指定的镜像,用法如下: [root@localhost ~]$ docker search ...

  10. vue2.0+element-ui(01简单点的单页面)

    前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...