我的Vue项目搭建和Vue CLI工具

1,013 阅读2分钟

刚刚入门前端,在掌握到基础HTML、CSS、JavaScript之后学习的第一个前端框架便是现在如火如荼的Vue,目前整理一下入门基础。

Vue官方文档地址:cn.vuejs.org/

Vue Cli脚手架官网地址:cli.vuejs.org/zh/

一、先安装node.js

官网地址nodejs.org/en/,红色为较为稳定版,蓝色则为最新发布的。推荐12.18.3稳定版。

安装完成后打开终端,输入node -v出现版本号则代表安装成功,如图:再输入npm -v查看npm命令是不是安装成功,出现版本号则代表成功,附图:

二、更换NPM镜像

由于NPM是国外的,下载起来会比较慢,这里先更换使用国内淘宝镜像的NPM:

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

然后输入:npm config list查看npm配置是否更换成功,如图发现已经更换为taobao镜像则为成功:

三、正式开始安装Vue CLi工具,搭建vue框架。

以下任意一个命令都可以安装:

npm install -g @vue/cli

或者

yarn global add @vue/cli

完成之后输入下面的命令检查版本,是否安装成功:

vue --version

然后打开需要搭建项目的根目录创建终端,输入下面的命令,开始自动搭建:

vue create mark1

"mark1"是我项目名,配置选项第一次建议默认,如图:

然后就是等待......

四、启动项目,run起来

这样子便是成功搭建了一个vue框架,这里可以根据提示在终端输入 cd mark1 进入mark1,然后输入 npm run serve 运行项目。

为了直接开发,建议在编辑器中打开mark1文件夹,然后在终端输入 npm run serve,过程和效果如图:

然后就是展示:

附:项目全局配置vue.config和npm配置文件package.json

1、生成的根目录中有一个package.json文件其中记录有后期项目需要安装的依赖包的版本和记录,如图:

还有就是为了项目启动方便,项目启动命令可以自定义,以后启动命令就变成了npm run dev

2、vue的作者考虑到方便开发者做一些全局配置就可以在根目录下创建一个vue.config.js的文件,如图:

比较常用的就是修改个端口和修改页面Tab的名字,还有修改eslint一些非必要提示,后续还有很多,我后面会记录分享

,然后一个最简易的vue框架项目便搭建完成了。成果展示:

end...