VUE从零开始-创建项目

199 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前面已经搭建好了vue的环境,接下来创建一个vue项目。

在本地新建文件夹vue_stduy。然后cmd到该目录。通过命令创建项目vue_day1。

vue init webpack vue_day1

image.png

根据提示依次输入即可。

Project name :项目名称 Project description:项目描述,默认为A Vue.js project Author:作者 Install vue-router? 是否安装vue的路由插件 Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格 Setup unit tests 是否需要安装单元测试工具 Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试

创建成功后我们可以在本地文件夹看到有项目文件了。

image.png

我们可以直接在cmd中运行,也可以通过IED打开运行。

cmd运行命令npm run dev 运行成功后展示

image.png

在本地浏览器输入http://localhost:8080/

image.png

我本地安装的vs code。通过vs code打开项目

image.png

尝试新添加一个页面FirstVue.vue

在components下面新建文件FirstVue.vue。

image.png

vue页面一般都是由template模板,script以及style组成。这里先简单写个。

然后在router目录下的index.js文件中添加路由。

image.png

这里我们在默认了首页面为FirstVue。打开运行窗口输入npm run dev

image.png

我们再刷新浏览器就可以看到默认的页面已经修改了。

image.png

好了,vue项目基本完成。后续要去github找一个项目来学习了。

加油,相信你可以!!