前提:已安装node.js,未安装请参考https://www.toutiao.com/article/7397725180941877786/
步骤1:在终端中运行以下命令来全局安装Vue CLI:
同时按下Win+R输入cmd
输入npm install -g @vue/cli进行安装
运行以下命令确认安装成功:vue --version
步骤2:创建Vue项目
(1)创建项目文件夹:自选位置创建新文件夹
双击打开新建的文件夹,点击“右击”,点击“在终端中打开”:
在终端中输入vue create vue-app创建项目,注意若出现以下报错按操作进行,没有请直接跳过。
出现这个错误是因为Windows的PowerShell执行策略默认情况下不允许运行脚本。您需要更改执行策略以允许运行脚本。
以下是解决这个问题的步骤:
1: 以管理员身份运行PowerShell
按下 Win + X 键,选择 Windows PowerShell (管理员) 或 Windows PowerShell (Admin)。
2: 检查当前的执行策略
在PowerShell中输入以下命令以查看当前的执行策略:
Get-ExecutionPolicy
3: 更改执行策略
输入以下命令将执行策略更改为 RemoteSigned,这将允许运行本地脚本和从Internet下载的签名脚本:Set-ExecutionPolicy RemoteSigned
重新输入vue create vue-app进入项目目录:
步骤3:使用上下按键选中Manually select features(此项为自定义设置),点击回车确定。
步骤4:上下按键进行移动,按空格进行选定(前方有*的为已经选中的),我选择Babel、Router、Vues、CSS Pre-processors,这里大家根据需要进行选择,点回车进行下一步。
步骤5:选择版本,这里我选2.x,大家根据需要进行选择。
步骤6:选择路径模式。我选择的是no(直接输入n,点击回车)
步骤7:选择CSS预处理语言,选择Less。主要为css解决浏览器兼容问题。
步骤8:选择存放配置,这里我选择in package.json。
步骤9:这里选择是否保存本地设置,可用于下次创建时选择直接创建,类似于游戏存档。这里我选择n(不保存)
步骤10:开始创建,等待创建完成。
步骤11:安装完成,根据提示输入cd vue-app,进入项目文件夹。
步骤12:输入npm run serve启动开发服务器
步骤13:按住ctrl点击http://localhost:8080,你应该能看到默认的Vue欢迎页面。