优秀的编程知识分享平台

网站首页 > 技术文章 正文

前端vue项目创建(vue创建项目后开始写的步骤)

nanyue 2024-09-07 16:39:59 技术文章 11 ℃

前提:已安装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欢迎页面。

Tags:

最近发表
标签列表