vue主页架构

一、配置准备

1.安装Nodejs

Nodejs官网

尽量安装稳定版本，安装教程见NodeJS安装教程。

2.配置npm全局安装路径

管理员身份运行命令行

然后在输入框中输入NodeJS的安装目录，格式如下：

npm config set prefix “安装目录”

检查是否安装成功，格式如下：

npm config get prefix

3.切换npm淘宝镜像

管理员身份运行命令行，输入：

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

4.安装Vue-cli

依然是在管理员身份下的命令行中，输入命令：

npm install -g @vue/cli

验证是否安装成功：

vue --version

二、正式搭建环境

1.在一个无中文的路径下创建一个文件夹，命名为vue（啥都行。。。）

2.进入该文件后，选择路径框，输入cmd

3.进入命令行后，输入 vue ui

4.随即便会创建一个图形化界面

5.点击创建新项目即可

6.项目命名

保持无中文路径，包管理器选择npm（由于依赖的是NodeJS），Git可不选，然后点击下一步。

7.选择手动配置即可

8.勾选上Router，因为项目中需要用到路由

9.看图选择配置

然后点击创建项目，等待命令行下载完成，即可完成创建。（预设保留与否无关紧要）

这就是创建好了。

三、进入项目

1.用VSCode打开刚才创建的vue文件夹。。。c，我目录安装错了，你们别学我。问题不大，我剪贴复制就好了。

打开之后就是这个样子，目录结构就不在这里介绍了，下个博客再讲吧。

2.运行

选择package.json文件，看图操作

点击Debug后，选择serve运行项目

点击进入本地

这样Vue框架的项目算是搭建完毕了

对了，补充一点，关于如何调整端口地址

打开vue.config.js文件

在代码中输入如下内容

devServer:{
    port:7000
  }

别忘了加“，”