前端准备工作

1.浏览器

火狐浏览器 ie浏览器 Google浏览器
现在基本都用的Google浏览器 它简洁，打开响应快速，有开发者工具

1.1Google浏览器下载

google官网 （直接点击下载chrome，然后到自己的下载记录双击文件运行就ok了）
默认下载在c盘 C:\Program Files (x86)\Google 如果不想它在c盘 直接复制到别的盘，然后删除c盘下的Google文件就好了，当然Google浏览器下载的东西地址还得你自己改啦。

2.开发者工具

Webstorm 国外开发的一款商业软件，当然也有免费开源的版本，与pycharm类似，有很牛逼的称呼哈，很专业哈，对电脑的配置还是要求高点的。
Vscode 微软开发的，一个免费跨平台（Windows，macOx，Linux等操作系统）的代码编辑器，支持很多编程语言和文字语言，属于轻量级别，打开快速方便，还很好看。
Hbuliderx 国内开发的高效编程软件，功能特性很多，对电脑要求也高点，对大型项目的支撑比较弱势，主要用于前端开发和移动应用开发。
我用的是vscode就写vscode吧。

2.1vscode下载

vscode官网下载

自己电脑啥类型的点击啥下载，双击安装，自己改安装地址，一直点下一步就好了，如果想要个快捷方式也可以勾选一下。不过system的可以自己修改路径很推荐哦！

2.2 软链接修改拓展存放地址

1.vscdoe默认安装地址

C:\Users\xxx\.vscode\extensions

2.剪贴这个extensions文件到你的地址

D:\Program Files (x86)\vscodetuozhan\extensions

防止你更新版本，地址失效，不要放自己安装的vscode目录里
3.cmd 管理员身份打开 输入

mklink /D "C:\Users\xxx\.vscode\extensions" "D:\Program Files (x86)\vscodetuozhan\extensions"

4.找到vscode快捷键右击属性，对目标属性进行更改

"D:\Program Files (x86)\Microsoft VS Code\Microsoft VS Code\Code.exe" --extensions-dir "D:\Program Files (x86)\vscodetuozhan\extensions"

应用确定就ok啦

3.vscode工具及扩展

3.1 中文安装包

嗨英文不好的朋友快下载 Chinese(Simplified)

3.2 浏览器打开方式

下载Live Server

就可以右键点击open with live server 运行代码了

3.3 Javascript代码提示

javaScript(ES6) code snippets

3.4 代码高亮

vue2 vetur vue3 vue-offical(原volar)

4.nodejs

nodejs就像是一个工具包（npm），一个语言解释器，有vue-cli脚手架，babel转换器等工具，就像jdk一样，没有nodejs js只能在浏览器上运行，有了它就可以在服务器上运行js，着实方便不少哇。

4.1 nodejs下载

node最新版下载
node选择版本下载
下载一直按下一步就好了，当然想改改变安装目录也是可以的，接下来的环境配置

4.1.1 把nodejs安装目录加入系统变量中

右击【此电脑】点击【属性】点击【高级系统设置】点击【环境变量】双击【path】那行 点击【新建】输入安装目录，按enter键，然后点击【确定】。验证配置成功，win+r 输入cmd 然后
输入node -v

4.1.2 可以选择修改模块下载地址（默认在C盘）

查看全局模块存放地址和缓存地址
win+r 输入cmd 然后输入npm get prefix 查看全局模块存放地址 输入npm get cache 查看缓存地址

在 nodejs 安装目录下，创建 “node_global” 和 “node_cache” 两个文件夹

然后修改路径 输入npm config set prefix “D:\Program Files (x86)\Nodejs（你的地址）\node_global”
输入 npm config set cache “D:\Program Files (x86)\Nodejs（你的地址）\node_cache”
根据上面步骤一进行添加D:\Program Files (x86)\Nodejs（你的地址）\node_global

可以试试npm -install -g @vue/cli 如果网络不好可以进行下一步设置

4.1.3 设置淘宝镜像

win+r输入cmd 输入npm config set registry https://registry.npmmirror.com
然后查看是否成功 npm config get registry

如果还觉得不够快就进行下一步吧

4.1.4 安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com
测试 cnpm -v
npm 与cnpm两者的区别
cnpm下载会在node_modules文件夹下生成两个文件夹：_xxx@版本号@xxx和xxx，npm下载只有个xxx包，相当于两者等同。运行cnpm uninstall会删除_xxx@版本号@xxx，说xxxrequire（引用）了_xxx@版本号@xxx，cnpm安装模块多的东西更快。

5.vue

渐进式框架，易于学习，vue里的vue-cli脚手架有很多写好了的东西就像bootstrap框架。

5.1 vue-cli下载

npm -install -g @vue/cli
测试 vue --version

5.2 创建vue项目

5.2.1 Vue-cli工具创建vue项目

创建一个放项目的文件夹 右键点击【在集成终端中打开】 输入 vue create 项目名（小写可用-隔开）

使用键盘上下键移动空格选择或取消，

报了个WARN Skipped git commit due to missing username and email in git config, or failed to sign commit.You will need to perform the initial commit yourself.
解决 git config --global user.name “名字” git config --global user.email “邮箱地址” 可以查看下 git config user.name 还有一个更简单的方法把git关掉 文件首选项 设置 搜索 git:Enable 把√去掉就好了。
强调文本 强调文本

接下来可以选择默认模板或者第三个Manually select features（“手动选择特性”），然后选择下图中的babel pwa ，Linter/Formatter不要选一个空格没对都会报错的，然后选择vue版本2或3。

选择配置文件位置 专用配置文件 In dedicated config files 或 In package.json

是否保存这个设置运用于以后的项目，那当然不啦。

运行项目 cd 刚创的vue目录下
启动 npm run serve

5.2.2 Vite工具创建vue项目

1. npm init vue@latest （第一次需要下载相关的包选择y）
2. 输入项目名称
3. 键盘选择
4. cd one
5. npm install
6. npm run dev
   

其他有问题的看 菜鸟网站