住房城乡建设厅网站,wordpress外链视频播放,自己可以接单做网站吗,修改公司网站一、新建项目
用cmd命令创建项目 1.1创建文件 以管理员身份打开命令行界面#xff0c;进入任意一个想要创建项目的文件夹 输入#xff1a;vue create vue01 1.2创建成功
Successfully created project vue01出现这个说明创建成功1.3项目目录
二、 vue-router 安装和配置的…一、新建项目
用cmd命令创建项目 1.1创建文件 以管理员身份打开命令行界面进入任意一个想要创建项目的文件夹 输入vue create vue01 1.2创建成功
Successfully created project vue01出现这个说明创建成功1.3项目目录
二、 vue-router 安装和配置的步骤
2.1 在项目中安装 vue-router
在 vue2 的项目中安装 vue-router 的命令如下
npm i vue-router3.5.2 -S2.2 创建路由模块
在 src 源代码目录下新建 router/index.js 路由模块并初始化如下的代码
import Vue from vue;
import Router from vue-router;
import Home from /components/Home;
import About from /components/About;
// 调用vue.use()函数把Router安装为vue的插件
Vue.use(Router);
//向外共享路由的实例对象
//创建路由的实例对象
export default new Router({routes:[{// 在routes数组中声明路由的匹配规则// path 表示要匹配的hash地址// component表示要展示的路由组件path: /home,component: Home},{path: /about,component: About}]
})2.3 导入并挂载路由模块
在 src/main.js 入口文件中导入并挂载路由模块。示例代码如下
import Vue from vue
import App from ./App.vue
import Router from ./router/index.js
import ElementUI from element-ui;Vue.config.productionTip false
Vue.use(Router);
Vue.use(ElementUI);new Vue({el: #app,router: Router,render: h h(App),
}).$mount(#app)2.4 声明路由链接和占位符
在 src/App.vue 组件中使用 vue-router 提供的 和 声明路由链接和占位符
templatediv idapph1APP 组件/h1!-- 1、定义路由链接 --router-link to/home首页/router-linkrouter-link to/about关于/router-link!-- 定义路由的占位符 --router-view/router-view/div
/templatescriptexport default {name: App,}
/scriptstyle
#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使用npm run serve运行项目出现原因main.js文件中
new Vue({el: #app,router: Router,render: h h(App),
}).$mount(#app)官网上实例化vue对象时也使用了简写如
const app new Vue({ router}).$mount(#app)router等价于router:router,也是因为变量名和属性名一样如果你的路由实例名不是router则不要省略。
如下
new Vue({el: #app,router: Router,render: h h(App),
}).$mount(#app)
