通过环境搭建的学习,我们已经搭建出了开发vue项目所需要的环境,本篇文章就将介绍如何在本地快速搭建一个vue项目
vue-cli的使用
在环境搭建中我们已经安装了vue-cli,现在我们就利用它来快速搭建一个vue项目吧
- 打开命令行,运行以下命令
vue create hello-world
运行命令之后会有一些选择项,选择怎样创建项目:
这里是让我们选择怎么创建项目:
ts - 使用typescript语法
default - 使用默认的
Manually select features - 自己选择特性
这里我们通过键盘上下方向键选择第三项,按下确认键进入下一步
这一步是让我们选择需要哪些特性:
babel - es6语法编译器
Css Pre-processors - css预编译器
Linter/Formatter - 代码风格检测
在这里通过键盘上下方向键控制选择,空格键进行选择,其余的选项等我们后续学习了在进行选择,接下来按下确认键进入下一步
这一步是让我们选择css预编译器,同样的我们通过键盘上下方向键控制选择,可以根据自己掌握的css预编译器进行选择,我这里选了less作为css预编译器,按下确认键进入下一步
这一步是让我们选择代码风格检测工具,也可根据自己的习惯选择,我这里选择了ESlint + Standard config,按下确认键进入下一步
这一步是让我们选择代码风格检测的特性:
Lint on save - 保存时检测
Lint and fix on commit - 在提交代码时检测和修复错误格式的代码
这里我们选择保存时检测,按下确认键进入下一步
这一步是让我们选择把各种配置放在什么地方:
In dedicated config files - 生成各自的配置文件
In package.json - 把配置写在packge.json文件里
这里我们选择第一个,按下确认键进入下一步
这里是问你需不需要把你选择的这些特性保存起来,这里我们输入 N 不用保存,按下确认键开始自动搭建项目
等项目搭建完成后我们就会看到如下界面:
根据提示我们可以在本地运行我们的项目,yarn 也是包管理工具,类似于npm 如果想要安装可以通过以下命令:
npm install -g yarn
- 运行本地项目
cd hello-word # 进入项目目录
npm run serve
#或
yarn serve
当命令行中出现:
说明我们的项目已经运行成功,打开浏览器输入http://localhost:8080/
即可进入在浏览器中预览我们的项目
到此,我们的项目已经搭建成功,接下来将会介绍以下项目目录,以及每个目录的作用
上一篇:Vue从零基础到项目部署-环境搭建篇