创建一个vue项目并配置默认页面

目录

第一步：先安装npm环境，有的朋友直接跳过 -->

第二步：创建项目

第三步：修改配置文件

---

第一步：先安装npm环境，有的朋友直接跳过 -->

---

安装npm

首先：先从nodejs.org中下载nodejs  -->  nodejs官网

双击安装，在安装界面一直Next

直到Finish完成安装。

打开控制命令行程序（CMD）,输入命令检查是否正常

如果要使用国内镜像cnpm可以输入以下命令

npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

---

第二步：创建项目

第一步：安装vue-cli

cnpm install vue-cli -g      //全局安装 vue-cli

查看vue-cli是否成功，不能检查vue-cli,需要检查vue

选定路径，新建vue项目，要在那个目录下建项目就cd到目录路径

下面我一项目名为mountains新建vue项目

vue init webpack  ”项目名称“

创建完成以后cd到项目路径下执行命令npm install 或者 cnpm install 来安装依赖包

启动命令：npm run dev 或 cnpm run dev

然后打开浏览器访问地址：127.0.0.1:8080

---

第三步：修改配置文件

我使用vscode打开刚创建的项目

右上角文件 > 打开文件夹 > 选择创建好的项目导入进来

项目导入进来先找到刚才的默认页面是哪里加载的

找到router文件下的index.js文件，这个是服务路由的配置文件

找到路由跟着引入地址找到刚才加载的实际vue页面

新建一个页面login.vue

让默认地址指向我们的login.vue

重新启动访问

可以看到，虽然我们的login页面加载了出来，但是有一个图片不是我们写的内容，这个就是vue的全局引入页面了

找到根目录的main.js打开

根据代码找到了App.vue页面，打开它

将这俩地方都注释，我们的页面就是本身的元素了