VUE2, 基于 vue-cli 搭建创建 vue 项目
![VUE2,基于vue-cli搭建创建vue项目](https://static001.geekbang.org/infoq/d6/d663ead243570109d850670c9a1090f2.gif)
前提:必须安装 node.js,官方地址:https://nodejs.org/en/
然后安装 vue-cli 安装方式:cmd 命令行安装:打开 cmd 命令符输入进行全局安装脚手架:npm install -g @vue/cli
全局脚手架安装成功之后就可以创建 vue 项目了
三种创建方式:这里演示第三种
第一种(旧版本创建项目,不推荐):首先要安装依赖包 npm install -g @vue/cli-init 然后命令行输入: vue init webpack my-project 开始创建项目
第二种(新版本可视化创建项目,推荐):通过命令行输入:vue ui 进行可视化创建
第三种(新版本命令行创建项目):通过命令行输入:vue create my-project 开始创建 vue 项目
步骤一:选择安装方式:第一种自动安装;第二种手动安装建议手动安装选择自己需要的包。
![](https://static001.geekbang.org/infoq/11/11047c3ce88efd9884a1cdfba66cf967.png)
步骤二:选择需要的包进行安装,空格选择,回车确定。这里选择常用的三个包
![](https://static001.geekbang.org/infoq/55/55e736755fa043679ba0423acfd74c8f.png)
步骤三: 提示是否选择历史模式的路由,这里选 N,哈希模式
![](https://static001.geekbang.org/infoq/d6/d654a8673460c84ab4c459c6dc62925e.png)
步骤四:选择 ESLint 版本,这里用常规模式:Standard config
![](https://static001.geekbang.org/infoq/08/087dcf7fd91d084f8cc055a4fd3ad15e.png)
步骤五:语法检查方式,选择第一个:保存就检查
![](https://static001.geekbang.org/infoq/c5/c5725b9de2006b89b755960f110c793c.png)
步骤六:选择 Babel、ESLint 文件存放,是单独存放还是存放在一起,这里选第一个单独存放,单独存放便于后期维护
![](https://static001.geekbang.org/infoq/97/97467708496a6b48f35f8cff2454002f.png)
步骤七:提示是否记录此次配置,记录此次配置再次创建项目时可以引用同样的配置,这里随意
![](https://static001.geekbang.org/infoq/95/95fa72ef3b21d202711119c661f26ae0.png)
回车等待创建完成
然后测试
首先进入创建的项目:cd my-porject
![](https://static001.geekbang.org/infoq/1d/1d2a811493ef376b576be0aa18ed51ba.png)
然后进入项目跑起来~~~ npm run serve
![](https://static001.geekbang.org/infoq/cc/cc07287e7e684fe482a9b9bc157ad505.png)
项目成功跑起来之后会有一个哈希地址
![](https://static001.geekbang.org/infoq/58/587dc0300ca05f59ea15a54db5d1f254.png)
复制地址到网页打开,出现下图说明项目成功创建完成!
![](https://static001.geekbang.org/infoq/4d/4d0b0adf18cdf02800981bae341d0a57.png)
版权声明: 本文为 InfoQ 作者【Chalk】的原创文章。
原文链接:【http://xie.infoq.cn/article/c6da9a3d47699cffad25613b5】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论