vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法

安装脚手架

node 版本要求： > 8.9 。

关于旧版本：如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x)，那么需要先卸载掉。

卸载旧版本运行：``npm uninstall vue-cli -g`` 或 ``yarn global remove vue-cli``。

安装@vue/cli：npm install -g @vue/cli 或 yarn global add @vue/cli

安装之后，可以在命令行中访问vue命令。

检查版本是否正确：vue --version。

快速原型开发（仅用于学习）：（安装）npm install -g @vue/cli-service-global 或 yarn global add @vue/cli-service-global 。

安装vscode插件Vetur：用于高亮.vue文件代码。

利用vue脚手架搭建项目

第一种方法：

使用vue命令搭建：vue create 项目名

注意：项目名不能有大写字母，否则会报错。

搭建项目时，需要我们选择一系列选项：

1、? Please pick a preset: (Use arrow keys) 请选择一个预设:(使用方向键)
> default (babel, eslint) 默认（bable, eslint）
Manually select features 手动选择功能

选择Manually select features

2、? Check the features needed for your project: (Press <space> to select, <
a> to toggle all, <i> to invert selection) 检查项目所需的特性:(按<空格>选择，<
a>切换全部，<i>反转选择)。
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

项目需要什么特性就选择什么特性

3、? Use history mode for router? (Requires proper server setup for index fa
llback in production) (Y/n) 路由器使用历史记录模式?

Y/n

4、Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow
keys) 配置放在哪里?
> In dedicated config files 专用配置文件
In package.json 在package.json文件

In package.json

5、? Save this as a preset for future projects? (y/N) 将其保存为未来项目的预置?

y/N

然后项目就搭建完成了。

怎样使用呢？

cd 项目名：进入到你创建的项目

npm run serve：开启服务器，拿到服务地址，在浏览器打开服务地址。

第二种方法：

使用 vue ui 命令来搭建

使用 vue ui 命令后，会自动打开一个Vue 项目管理器网页，然后我们手动搭建项目就行了。

创建 -> 在此创建新项目 -> 输入项目名 -> 选择一套预设 -> ? Use history mode for router? (Requires proper server setup for index fa
llback in production) -> 创建项目 -> 保存预设 -> 任务、serve、启动app 。