Vue学习笔记之使用脚手架创建一个基础项目(二)

一、安装vue脚手架Vue-Cli

打开cmd界面，复制粘贴以下指令:

安装脚手架

cnpm install -g @vue/cli
1

在这里插入图片描述

安装脚手架初始化

cnpm install -g @vue/cli-init
1

在这里插入图片描述

查看版本

vue --version
1

在这里插入图片描述

先安装VUE相关的插件

代码检查工具

ESLint
1

在这里插入图片描述
代码高亮工具

vetur
1

在这里插入图片描述

VSCode中文插件（可装可不装）

chinese
1

在这里插入图片描述

使用脚手架

在这里插入图片描述

执行以下指令：

 vue init webpack [项目名称]
1

它会把项目创建在当前文件夹下，如果需要更好项目存放位置，则cd到指定的目录下，再执行指令即可，如下图所示:
在这里插入图片描述

注意：如果提示错误:
vue : 无法加载文件 D:\Software\Node-js\node\node_global\vue.ps1，因为在此系统上禁止运行脚本。
则执行以下两条指令:
在这里插入图片描述

# 取得shell的当前执行策略，显示Restricted（表示状态是禁止的）

get-ExecutionPolicy
1

# 修改状态

set-ExecutionPolicy RemoteSigned
1

继续创建项目
在这里插入图片描述

打开项目结构

打开刚才搭建的项目文件夹就会自动进入下图的目录结构

在这里插入图片描述

启动项目

打开一个新的终端，执行项目启动指令:

npm run dev
1

如下图所示:
在这里插入图片描述
然后打开浏览器访问 http://localhost:8080

就此完成！！！！

最后总结一下项目的一些指令

项目运行
npm run dev

项目打包
npm run build
1
2
3
4
5

相关阅读:
Stage #14 XSS注入：利用CSS内联注释突破防御
Express操作MongoDB
非全自研可视化表达引擎RuleLinK可视化之路
【Master公式】对于这一类符合的递归可以直接确定时间复杂度
FPGA板卡启动以及LED灯带调试
【嵌入式百科】002——原码、反码、补码
2022年测试行业的新变化
ESLint自动修复代码规范错误
.stream().map与.stream().flatMap的使用
腾讯云网站建设服务有哪些优势？适用于哪些场景？

原文地址：https://blog.csdn.net/Dust_from_fire/article/details/125502574