让我们来看一下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标签,效果如上