vue.js单页面应用实例的简单实现

前端之家收集整理的这篇文章主要介绍了vue.js单页面应用实例的简单实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一:npm的安装

由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功。

测试node的版本号:node -v

测试npm的版本号:npm -v

以上提示代表安装成功

二:vue.js环境搭建

1、首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装vue.js环境::cnpm install -g vue-cli

3、测试vue的安装:vue

三:vue.js项目的建立

新建一个名为pt的vue项目:在F盘创建一个名为pt的文件夹:执行:cd f:\ vue init webpack pt

接下来会依次出现以下的操作

注:Use ESlint to lint your code-是否使用ESlint(最后选否,否则不熟悉这种严格的方式,会被坑惨,没空格会报错,多空格也会报错)

vue项目的启动步骤:(1)cd pt (2)npm install (3)npm run dev

最终的目录结构:

四:创建一个vue实例

main.js:应用入口文件

App.js:初始化组件

例:我们要实现如下效果的一个网站

有四个模块:首页、公司介绍、招贤纳士、易点咨询。

项目的思维导向图:

1、配置入口文件main.js

',components: { App } })

2、初始化组件App.vue开发

3、创建公用头部组件

4、创建其他组件

需注意模板文件都只能有一个根元素。

zx

像这种情况会报错。

正确的为:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章