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

2022-11-02 15:22:39 浏览数 (1)

目录

第一步:先安装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页面,打开它

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

0 人点赞