手把手教你使用脚手架的交互式命令行方式和图形化界面方式创建vue项目

598 阅读2分钟

由于最近在学习vue,把相关的一些知识点记录一下。

1安装脚手架

打开cmd控制台或者Windows PowerShell,输入

npm install -g @vue/cli

安装完成后可输入vue --version 查看安装版本,如果能够查看,说明安装完成

一. 基于 交互式命令行 的方式,创建 新版 vue 项目

首先在cmd控制台或者Windows PowerShell 输入 (my-project为你要创建的项目名字)

vue create my-project

1选择需要的功能(键盘↑ ↓ 移动,回车确定,空格选择)
-默认模式创建项目
-手动配置选择功能
(我们选择手动配置)

2选择需要安装的功能

3是否安装历史模式的路由(n)

4选择ESLint 语法版本,我们这里选择标准类型

5选择什么时候进行ESLint语法校验

6选择Babel等这些工具的配置文件怎么进行创建,我们一般推荐创建单独的配置文件

7是否将当前的配置选项储存为一个模板,这样以后就可以直接用这个模板创建

8创建完成,我们可以cd 到创建的目录下 然后用npm run serve 运行项目

9在浏览器中去访问local中的地址,就能看到创建出来的项目了

10

二. 基于 图形化界面 的方式,创建 新版 vue 项目

打开cmd控制台或者Windows PowerShell,输入

vue ui

1输入完之后会自动打开一个浏览器面板

2 点击创建,选择一个创建的目录文件夹 3 输入项目文件夹名称,另外选项都设置默认

4选择默认配置还是手动配置

5这里我们选择了Babel、Router、Linter、和使用配置文件(这个最好勾选,这样我们的插件配置将保存在各自的配置文件中,而不会都放在package.josn中,方便后期的管理和维护)

6选择是否使用历史配置模板;选择ESLint语法版本;选择什么时候进行语法校验

7是否要将当前的一系列配置保存到一个预设模板中,这样以后可以直接调用。

8等待创建。。。。 创建成功。里面可以直接查看当前的插件、依赖和配置

9点击任务 serve是用于开发环境下 build用于生产环境下

10点击运行 然后点击启动app 成功了