版权声明
- 本文原创作者:清风不渡
- 博客地址:https://blog.csdn.net/WXKKang
重拾前端记忆,记录学习笔记,现在进入Vue部分
一、什么是Vue
Vue是优秀的前端框架,是一套用于构建用户界面的渐进式框架
官网地址:https://vuejs.org/
中文官网地址:https://cn.vuejs.org/
二、安装Vue工具
Vue Cli 是Vue.js开发的标准工具,Vue Cli 是一个基于Vue.js进行快速开发的完整系统
npm install -g @vue/cli
//或通过镜像
cnpm install -g @vue/cli
安装完成之后,通过如下命令行检测是否安装成功
vue -V
三、创建一个项目
使用下面的命令行来创建一个项目
vue create vue-demo
//注意:项目名称不能存在大写,可用-连接项目名称
第一步:在要创建的目录【鼠标右键】——【在集成终端中打开】
第二步:输入vue create 项目名称,回车
题外话:如果出现如上报错信息,处理方式如下:
(1)使用管理员身份运行PowerShell
(2)执行set-ExecutionPolicy RemoteSigned ,输入Y,回车
第三步:选择默认项目模板,或者选“手动选择特性”来选取所需要的特性(以“手动选择特性”为例)
使用键盘【上、下】键进行选择
使用【空格】进行选中或取消选中
第四步:选择Babel和Progressive Web App (PWA) Support
建议取消Linter / Formatter 的选择,以免发生“不必要的麻烦”
第五步:选择vue版本(以3为例)
第六步:选择 In dedicated config files 将配置存放在专用配置文件,或选择 In package.json 放置在 package.json 文件中 (以第一个为例)
第七步:选择是否将本次设置保存为未来项目的预置,y代表保存,n代表不保存
第八步:等待项目安装
安装完成
四、运行项目
通过以下命令行来启动项目
cd 项目名称 //进入项目
npm run serve //启动项目
五、安装高亮插件
为了更好的开发环境,可在VS Code 中安装高亮插件
vetur或者volar都可,前者针对Vue2版本,后者针对Vue3版本
以volar为例,选择第一个安装即可