安装完 Node.js 和 npm/cnpm 后。通过命令控制面板:
1,创建 webpack 模板的新项目:vue init webpack my-project
2,进入项目:cd my-project
3,安装依赖包:cnpm install + 回车 (淘宝镜像使用) / npm install (下载国外的npm才使用)
4,运行项目:npm run dev
5,知道 localhost:8080可以访问,再进行以下配置。
首先必须在url/pages/demo2/index.vue 创建 index.vue,如下index.vue代码:
<template> <h3>我爱你</h3> </template> <script> export default{ data(){ return{ } }, beforeCreate(){ console.log("beforeCreate"); }, created(){ console.log('created'); }, beforeMount(){ console.log('beforeMount'); }, mounted(){ console.log('mounted'); }, beforeDestory(){ console.log('beforeDestory'); }, destoryed(){ console.log('destoryed'); } } </script>
router文件夹下面的index.js,即路由的配置:
import Vue from 'vue' import Router from 'vue-router' // @代表src目录 import HelloWorld from '@/components/HelloWorld' //这是第二种导入方式,所有版本都支持。 import Demo1 from '@/pages/demo1/index.vue' //如果页面的名称是index.vue,那么可以直接省略该页面。 //如:import Demo2 from '@/pages/demo2' 前提是必须先创建一个index.vue文件才行 import Demo2 from '@/pages/demo2/index.vue' Vue.use(Router) export default new Router({ routes: [ //下面每一个{}都是在配置一个路由。 { /** * 斜杆表示一个页面,就是component:HelloWorld * 斜杆 表示根目录,如果斜杆后面没有输入其他东西,默认就是进入默认页面。 */ path: '/', name: 'HelloWorld', /*页面的名称*/ /*component 组件 成分 组成部分 英 /kəmˈpəʊnənt/ *component:HelloWorld,并不是说HelloWorld文件在components目录下。 *这里仅仅表达的是:HelloWorld是一个组成部分。 *这里的文件是有上面 inport 进行导入的:import HelloWorld from '@/components/HelloWorld' * @ 表示 src 目录 即:'src/components/HelloWorld' */ component: HelloWorld }, /* { path:'/demo1', name:'demo1', // 第一种引入路劲,有一些版本不支持该方式,所以不推荐使用。如下: component:require("@pages/demo1/index.vue") }*/ { path:'/demo1',//地址栏根目录后面,即斜杆后面输入该内容就会跳跳转到绑定的页面。 name:'index',//这只是一个别名,暂时用不到。 component:Demo1 //这里的绑定的Demo1是指:上面import进行导入指定路径的页面。 }, { path:'/demo2',//地址栏根目录后面,即斜杆后面输入该内容就会跳跳转到绑定的页面。 name:'index',//这只是一个别名,暂时用不到。 component:Demo2 //这里的绑定的Demo1是指:上面import进行导入指定路径的页面。 } ] })
其他注意点:
<template> <div id="app"> <!-- 运行时,页面会出现一个 V 形图标,就是在这里给添加的,所以,删除即可。 --> <!-- <img src="./assets/logo.png"> --> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>