一、Vue项目构建
Attention:以下内容为Mac机上运行,windows可能有所偏差~
Step1
打开终端,键入
npm install -g vue-cli
,使用vue-cli脚手架搭建vue项目能省很多事儿~
如果没有安装npm
,请先安装npm和node
,这部分小伙伴们请自行百度或者查看本博客的node专栏查看node+npm
的安装配置~
有些时候,可能需要在前面加上sudo,因为全局安装的指令有可能会因为没有权限导致安装失败,like this:
Step2
使用cd指令,进入一个你想存放vue项目的文件夹~
如果不知道cd到哪儿,可以使用ls指令查看当前目录的子目录。
Step3
使用
vue init webpack 项目名
,初始化项目。此时系统会让你填写一些确认信息,比如项目名、项目描述啥的,不想填的话可以一直回车~
其中有一个vue-router
,建议选择Y
,这个插件用于vue路由设置,最好安装下。ESlint
用于审查代码,最好也带上~
Set up unit tests
用于进行单元自测,用过node的小伙伴应该对于这个名称不陌生,编写单元自测能帮助避免代码逻辑错误,节省大量时间~
Setup e2e tests with Nightwatch?
,也用于自动化测试,这个我不太熟悉,再次推荐各位小伙伴自行百度~其他的一般一路回车就可以了~
--------------------初始化等待过程⌛️⌛️⌛️⌛️⌛️--------------------
Step4
经过漫长的等待,我们cd进入项目文件夹,执行
npm install
安装下项目依赖的包~like this:
Step5
下面就可以启动项目啦,依旧是项目文件夹,执行
npm run dev
即可启动项目,执行结果like this:
由于我本地已经启动了一个vue项目,所以当前项目是在http://localhost:8081
访问,一般默认端口为8080~
Step6
在浏览器里输入
http://localhost:8081
,即可访问项目入口即项目主页哒~
Step7
如需关闭服务,终端执行
control+c
即可关闭服务。