VUE学习（一）下载VS Code及插件、node.js、npm、vue-cli

1、下载vs code

官网：Visual Studio Code - Code Editing. Redefined

需要下载的插件有：

• Auto Rename Tag：能够自动更改结束标签

• Live Server：自动搭建本地服务器

• Prettier - Code formatter：代码美化

• Vetur：vue组件格式支持

• vscode-icons：美化文件图标

node.js的网址：

2、下载node.js

官网：Node.js

验证是否下载成功：

Windows 系统验证：win + R，输入cmd，打开小黑窗口。

输入命令，查看node和npm版本，验证是否安装成功:

node -v
npm -v

 

默认情况下，npm安装包时会从国外的地址下载，速度很慢，容易导致安装失败，因此需要先配置npm的源地址

使用下面的命令更改 npm 的源地址为淘宝源：

npm config set registry http://registry.npm.taobao.org/

更改好了之后，查看源地址是否正确的被更改 ：

npm config get registry

3、安装 vue-cli 脚手架

使用下面的命令安装vue-cli工具

npm install -g @vue/cli

注意：这里的【g】是全局安装的意思。

安装好之后，检查vue-cli是否安装成功

vue --version

4、使用 vue-cli 脚手架，搭建工程

选择一个目录，该目录将放置你的工程文件夹，在黑窗口中进入该目录(打开文件目录，在地址栏输入cmd就可以了)。

使用vue-cli提供的命令搭建工程

vue create 工程名

注意：工程名只能出现英文、数字和短横线

5、创建vue工程后，进行启动，进行打包

 

启动工程的命令，在这里输入cmd，打开工程目录所在的黑窗口：

在黑窗口输入命令：

启动vue的命令：

npm run serve

 

出现这个就是启动成功了。

 通过localhost:8080就可以访问了。

 打包vue的命令：

npm run build

打包成功后，生成dist文件夹。 

6、部署vue工程

把vue打包后的dist文件夹上传到nginx服务器、或者apache服务器上面，启动服务器就可以访问vue工程量。

注意：

由于vue项目中的文件夹【node_modules】太大，所以一般上传代码到svn或者git上面，都是不上传这个文件夹的，那么当从svn上面拉下来代码后，必须要通过命令，把【node_modules】文件给下载下来。

npm install

这个命令会把 package.json 中的依赖关系重新下载下来 。