设为首页收藏本站

开启辅助访问

创建一个新的vue项目并且将初始页面还原到空白项目开始

您所在的位置：网站首页 › vue打开网页后为空白页面 › 创建一个新的vue项目并且将初始页面还原到空白项目开始

创建一个新的vue项目并且将初始页面还原到空白项目开始

2024-07-15 17:06| 来源: 网络整理| 查看: 265

一、创建一个新的vue项目 1.桌面新建文件夹

2.点击位置栏

输入cmd，回车

3.全局安装vue-cli 脚手架

4.创建项目（vue create +项目名称）

5.选择npm （↑ ↓键移动，空格键选择，回车键确认）

这个不管直接回车

这样就创建完毕了：

6.先cd到创建的文件夹下，在yarn serve运行看看

7.复制地址到浏览器打开

初始界面：

二、将初始化vue项目还原到空白vue开始项目

（VSCode）

（刚刚上面的可以关了）

1.将刚刚创建的文件夹拖入VSCode打开

管理器的内容：

2.右键创建的项目，在集成终端中打开

注意：要在创建的文件夹下的项目下打开集成终端！！

yarn serve运行项目，Ctrl+鼠标点击地址打开

3.App.vue中，更改如下：删除内容，#app更改 #app { height: 100%; width: 100%; } import Home from './views/Home.vue' export default { name: 'App', components: { Home, } } 4.在资源管理器中右键删除 about.vue 和 helloword.vue 和 assets下的logo.png

5.在index.js中删除如下：

最终如下：

import Vue from 'vue' import Home from '../views/Home.vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, ] const router = new VueRouter({ routes }) export default router 6.home.vue更改如下

删除红框内容：

最终如下：

这是初始vue哈哈哈哈哈 export default { } .home{ width: 100%; height: 100%; } 7.在home.vue下随便打点东西，运行验证一下

补充：

控制台停止vue项目：在控制台按CTRL+C

over！

github

【本文地址】

CopyRight 2018-2019 办公设备维修网版权所有豫ICP备15022753号-3