思维导图
配置node环境
在安装vue.js前我们先要为电脑配置一个node环境
在以下网址
https://nodejs.org/en/
下载红圈的那一个
可避免配置麻烦
在我们安装完成后
可以使用快捷键Win r打开“运行”对话框
输入cmd
输入node -v，若出现版本号，代表安装成功
npm包管理器，是集成在node中的，所以安装了node也就有了npm
直接输入npm -v命令，显示npm的版本信息
安装国内镜像
安装完成后
国内访问npm可能比较慢，也会出现npm安装依赖包失败的情况
所以我们通过安装npm国内镜像
命令行输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
来安装
问题解决
安装脚手架
回到vscode
安装vue-cli脚手架构建工具
我们接下来在vscode上完成
点击新建终端
命令行输入npm install -g @vue/cli
等他跑完，如下
输入vue create hello-world
创建hello-world程序
以管理员身份打开vscode
无下图问题的同学，可以跳过哦
出现这种情况，是因为我们把项目建到了C盘上
Ｃ盘的项目需要用管理员身份启动vscode
右键“开始”
输入set-ExecutionPolicy RemoteSigned
然后输入Y回车
使用hello-world
在命令行输入cd hello-world
打开hello-world文件
再输npm run serve
这时，点击Local后面的网址
可以看到我们创建的效果如下
目录文件的作用
node_modules：npm 加载的项目依赖模块,（整个项目需要的依赖资源）
src：这里是我们开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：
1.assets:放置一些图片，如logo等
2.components:目录里放的是一个组件文件，可以不用
3.App.vue：项目入口文件，我们也可以将组件写这里，而不使用components目录
4.main.js ：项目的核心文件
index.html：首页入口文件，可以添加一些meta信息或者同统计代码
package.json：项目配置文件
README.md：项目的说明文件
config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置
好啦！现在我们的vue框架已经安装好了
让我们再建一个website文件，开始制作网页吧
E N D
