前置
Vue CLI 是一个基于 Vue 能快速进行项目开发的工具。其安装需在 Node.js 环境下进行。安装环境可见Node.js官网
在终端检查Node环境
node -V
安装 Vue-CLI
-g表示全局安装
npm install -g @vue/cli
检查安装
检查是否安装完成,如果终端输出版本号,表示 Node.js 已安装;反之则无;
vue --version 或 vue-V
创建项目
- 打开所需要创建项目的目录终端,执行vue create vue-project, 创建项目名称为vue-project的项目。
- 选项
选择Vue3、Vue2或Manually select features自定义项目。在这里以自定义为例。
- 手动选择需要的功能(使用空格可勾选上功能)
>这里为了更方便组件化,选上Router。
Babel:es6转es3;
Router:路由;
Css Pre processors:less或scss
Linter/Formatter:eslint校验代码格式
- 选择vue的版本
- 是否使用历史模式
>单页面应用(SPA)的路由管理是一个重要的部分。路由模式主要分为两种:hash模式和history模式。这两种模式都用于在不重新加载页面的情况下,改变浏览器的URL,从而实现页面的无刷新跳转。
hash模式:URL中带有#号(例如:http://example.com/#/home)
history模式:URL中没有#号,看起来更像传统的多页面应用的URL(例如:http://example.com/home)
- 选择eslint风格
> eslint是 代码规范的检验工具,检验代码是否符合规范。这里选择Standard config标准风格
- 选择校验的时机
> 直接回车第一个,正常开启,保存校验
- 选择配置文件的生成方式
选择第一个,把配置文件生成到单独文件中
- 是否保存预设
不保存预设,等待安装,项目初始化完成
- 进入项目目录下,启动项目
- 项目启动成功