第一个Vue项目

让我们来看一下Vue项目长什么样子

我所用的是HbuilderX(3.2.9) 

构建Vue项目

1. 安装node.js, 从node.js官网下载并安装node

安装成功后, 在终端输入node-v ,出现版本号即为安装成功

2. 安装cnpm, 在终端窗口输入: npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装脚手架:通过vue-cli帮助创建vue项目, 在终端窗口输入: sudo cnpm install -g vue-cli

4. 在终端窗口输入: vue init webpack mVue(mVue是你的项目名称,通过webpack构建vue项目)

5. 在终端窗口输入:  npm run dev (运行成功后,浏览器会自动打开localhost:8080(自己输入也行))

页面结构

作为新手, 我们只需要关注以下几个页面

 src/assets/目录用来放我们的图片

src/components/目录用来放我们的页面信息

src/router/目录用来放我们的路径配置信息App.vue文件是所有文件编译前都要编译的一个文件,你可以把他理解为一顶帽子,扣在所有页面的头上,例如图片中的img标签

 

 在图片首尾添加p标签,效果如上