前端-VUE(环境配置)

前端.VUE.前端学习起步.环境配置

• ​​0. 目录​​
• ​​1. VUE​​

• ​​1.1 环境配置​​

• ​​1.1.0 目录+介绍​​
• ​​1.1.1 Explorer+DevTools​​
• ​​1.1.2 Nodejs+Yarn+镜像配置​​
• ​​1.1.3 Git​​
• ​​1.1.4 VSCode+DevTools​​
• ​​1.1.5 Vue-cli​​

• ​​1.2 Hello World​​

• ​​1.2.1 第一个VUE项目​​
• ​​1.2.2 用VSCode对项目进行开发​​

• ​​1.2 下一章​​

0. 目录

1. VUE

1.1 环境配置

1.1.0 目录+介绍

• 本机系统环境:

1. 型号:HP Pavilion Laptop 15-cw1xxx
2. OS:x64 Windows 10

• 注意安装软件的版本:

1. Chrome/Firefox+Vue DevTools
2. Node.js
3. npm/yarn
4. VsCode/WebStorm
5. Git

1.1.1 Explorer+DevTools

• 选择Firefox

安装地址:https://www.firefox.com.cn/

• 点击下载,选择直接运行进行安装

• 打开下载好的Firfox浏览器,进行插件配置,在菜单图标下点选添加附件

• 搜索vue

• 选择第一个devtools

• 进入并选择添加到Firefox

• 加载完成后,点击

• 看到如下图标,说明安装完成

1.1.2 Nodejs+Yarn+镜像配置

1. 选择node.js

安装地址:https://nodejs.org/zh-cn/download/

• 对nodejs进行安装

2. 选择yarn

安装地址:https://yarn.bootcss.com/

• 对yarn进行验证

1.1.3 Git

• 选择git

安装地址:https://gitforwindows.org/

• 安装git

• 验证安装

1.1.4 VSCode+DevTools

• 选择VSCode

安装地址:https://code.visualstudio.com/

• VSCode主题选定(视个人)

• VSCode插件的安装

1. Vetur (必装): Vue插件,功能全面

2. Vue 2 Snippets (强烈推荐): Vue相关代码自动补全

3. ESLint (必装): 前端代码样式校验,避免提交无法通过样式校验的代码

4. Visual Studio IntelliCode (必装): 智能代码补全与提示

5. Auto Complete Tag (推荐): 自动补全配对标签关闭、自动重命名配对的标签

6. HTML CSS Support (推荐): 协助补全样式中的css

• 最后看下有没有全部安装完毕

• 推荐插件

1. Code Runner: 临时测试想法时用
2. eslint-disable snippets: 插入临时关闭某条lint规则的辅助插件
3. IntelliJ IDEA Keybindings: 使用IDEA的快捷键绑定，对IDEA开发者有很大帮助
4. Markdown All in One: Markdown插件， 编辑、预览、导出全搞定
5. npm: 支持执行npm指令等
6. Path Intellisense: 文件路径自动补全插件
7. Sublime Babel: 更好的js、jsx文件语法高亮
8. JavaScript (ES6) code snippets: 针对js的语法补全插件(不太推荐)
9. Chinese (Simplified) Language Pack for Visual Studio Code: 官方简体中文包(不太推荐)

​​参考博主hlwz5735​​

• 最后重启VSCode

1.1.5 Vue-cli

• 安装vue脚手架

Vue- cli安装网址:https://cli.vuejs.org/zh/

拉到最下方可以看到安装命令:

yarn global add @vue/cli

• power-shell安装

• 验证安装

命令行输入

vue ui

​​注意,这里可能会出现如下错误​​

vue不是内部或外部命令/文件名、目录名或卷标语法不正确

1. 问题的根源在yarn,我们是全局安装的yarn首先找到vue的安装目录

找到nodejs的安装目录,我的路径如下:

D:\Software\Nodejs\node_global\bin

2. 找到vue.cmd记事本打开,把:

@"%~dp0\C:\Users\xiao\AppData\Local\Yarn\Data\global\node_modules\.bin\vue.cmd"   %*

改为

@"C:\Users\xiao\AppData\Local\Yarn\Data\global\node_modules\.bin\vue.cmd"   %*

然后运行vue ui就OK了

1.2 Hello World

1.2.1 第一个VUE项目

1. 开始创建项目,选择火狐浏览器

2. 滑动到最底下点击在此创建新项目

3. 项目配置

4. 等待

5. 成功

6. 终止

按下Ctrl+ C终止进程.

1.2.2 用VSCode对项目进行开发

• 打开VSCode

将文件夹目录拖动到VSCode中即可

• 如何运行?

1. 打开控制台

2. 输入如下命令

serve命令存放于package.json中

• npm启动

npm run serve

• yarn

yarn serve

3. 启动

Ctrl+鼠标左键点击启动

可以看见项目前端原型

4.如何编写自己的vue?

• 在左侧目录中打开

• 热部署的优势可以让我们实时看见修改变化,比如

• Ctrl+S保存,刷新网页

• 完结撒花

1.2 下一章