这里建议刚学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