vue--使用vue-cli构建项目

webpack是现在较流行的前端自动化工具,该工具可以帮助开发者打包代码,以减少需要手动的工作,可以提高开发效率。

vue中提供了一个脚手架工具vue-cli,这个工具已经将webpack配置好了,使用这个工具可以快速地搭建一个标准项目。

一、安装node

1.在 https://nodejs.org/zh-cn/   去下载,根据你的机型来选择。

2.检查node是否安装成功

mac:在终端输入 node -v

windows:打开命令行工具,输入 node -v

出现版本号则安装成功

3.查看npm是否安装成功

mac:终端输入 npm -v

windows:打开命令行工具,输入npm -v

出现版本号则安装成功

 

windows系统下安装成功

 二、全局安装vue vue-cli

1.使用命令安装

mac:

sudo npm install vue @vue-cli -g

windows:

npm install vue @vue-cli -g

安装时遇到问题可以参考:

https://blog.csdn.net/gebitan505/article/details/48177405

2.查看vue是否安装成功

vue -V

三、初始化一个vue项目

1.使用命令行

vue create 项目名(你自己定义的,并且一定要记得安装的路径)。

 2.之后会让你先择预设,作为初学者我们暂选第一项:default选项。接下来就是安装过程。

会把各种依赖,以及vue的框架结构都帮我们搭建好。安装好后,你会看到里面多了很文件以及文件夹。

四、查看vue项目是否搭建成功

 1.使用命令行进入之前创建的项目

cd 项目名(初始化的时候定义的项目名称)

2.启动服务

npm run serve

这个命令会开启一个localhost, 复制这个 localhost地址到浏览器,回车打开,会看到一个vue欢迎界面。

如果能够正常打开,说明搭建成功!

原文链接:https://mp.weixin.qq.com/s/n9T6M2Md0UirnQWcmP_8Zg

  

猜你喜欢

转载自www.cnblogs.com/vinieo/p/9994411.html