vue-cli webpack模板项目搭建及打包时路径问题的解

这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下。

1. 安装必要的环境准备

首先我们要能够暗转node.js,这个环境。百度搜索node,进入官网根据自己的操作系统进行下载即可。现在的版本都是自带npm的了。所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息。那么说明安装成功。

2. cnpm

由于我们在国内,所以npm的下载路径对我们来说是很慢的,因此我们要使用淘宝提供的cnpm镜像(与maven镜像是一个效果。)百度搜索cnpm,点击进行官网,里面的教程很详细,这里也不会啰嗦了。

3. 正式搭建vue-cli

我们首先进行vue-cli的一个下载:

cnpm install -g vue-cli

里面会跟着将webpack一起下载下来,如果没有,那么我们也可以手动自己下载一下webpack就好了,命令相同,只是把vue-cli换成webpack。

下载好之后,进入一个合适的目录,然后输入:

vue-cli webpack vuedemo1

webpack参数是指:我们使用webpack的这套模板

Vuedemo1指:我们在此目录下新建一个名字叫做vuedemo1的目录并将其作为项目的跟目录。

这样,一个空的vue-cli项目就搭建好了

测试一下,输入:

npm run dev

默认开启8080端口,并打开默认浏览器,看到一个熟悉的vue的页面。

4. 配置文件讲解

本身对配置文件理解的并不是特别深刻,这里将自己了解的一些配置含义写出来,共同学习一下。

bulid目录下面的webpack.base.config.js:这里一般是一些基础信息的配置,用过webpack的小伙伴应该都比较熟悉,这里简单讲解一下各个属性:

input:代表入口文件,这里一般指定的是index.html

output:出口文件。

module:这里一般写的的针对各个文件的配置的解析loader。

resolve:这里指其他配置,里面一般有:alias:起别名,例如:

alias: { 
‘vue$': ‘vue/dist/vue.esm.js', 
‘@': resolve(‘src'), 
‘RegForm': ‘@/components/RegForm.vue' //新增 
}

我这里新增一个别名,代表一个路径,这样,以后要引入这个vue文件的时候,直接:

import Regfrom from “RegForm

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/39.html