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
像这种情况会报错。 正确的为: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |