自动化工具构建vue项目

vue

其实之前对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项目 的全部内容, 来源链接: utcz.com/z/375092.html

回到顶部