用vue-router和webpack搭建路由项目
来源:互联网 发布:php中文验证码识别 编辑:程序博客网 时间:2024/05/20 23:35
一、用vue-cli构建初始项目
- step1:全局安装vue-cli
$ npm install --global vue-cli
- step2: 创建一个基于webpack模版的新项目
vue init webpack my-vueRouter-project1
step3:创建项目过程中,根据提示填写项目名称,是否使用ESLint检查项目等功能,具体填写结果如下:
step4: 安装依赖文件
// 进入到刚刚创建的项目目录:cd my-vueRouter-project1//安装package.json中的项目依赖npm install
二、项目目录下各个文件的含义和作用
以上操作自动构建的项目目录如下
一级目录
build文件夹和config文件夹都是和webpack配置相关
node_modules文件夹:npm install 安装的依赖代码库
src文件夹:存放项目源码,我们开发的所有代码都会放在这个目录下
static文件夹:存放第三方静态资源,如reset.css等,这个文件夹中默认包含了.gitkeep文件,这个文件表示即使这个目录为空也可以把这个目录提交到代码仓库里
.babelrc文件: 我们使用的是es6,通常我们通过babel将es6编译成es5浏览器才能识别,这个.babelrc文件就是babel编译的一些配置。
“presets”: 表示预设,表示babel转换预先需要安装的一些插件
“plugins”: 除了一些预设插件,这里也可以配置一些插件editorconfig : 编译器的相关配置, charset表示编码;indet_style表示缩进风格;indet_size表示缩进大小为2格;end_of_line表示换行符的风格;insert_final_newline = true表示新创建一个文件时会在文件末尾添加一个新行;trim_trailing_whitespace = true自动移除行尾多余空格;
eslintignore:忽略eslint语法检查的目录文件,下面表示bulid和config目录下,忽略语法检查
.eslintrc.js: eslint的配置文件。
extends: ‘standard’表示继承一个标准javascript的规则,这些与语法规则可以在上面注释的那个网站查看
https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
除了继承标准规则,也可以对具体的一些规则作修改,在rules中对具体的规则进行修改,值为0值,表示忽略这些规则的检查;gitignore: git提交时忽略这些文件和目录,不会提交上去
index.html: 入口html 文件,这个文件很简单,没有引入各种css,js文件,因为在webpack项目编译过程中,会自动将这些css,js文件插入进来;
package.json: 整个项目的配置文件,用来描述一个项目的基本信息和依赖关系;”script”: 表示定义命令行的一些命令,比如 “dev”: “node build/dev-server.js”,表示在命令行输入
npm run dev
的时候执行了node build/dev-server.js这个命令;
dependencies: 表示生产环境下的一些依赖;devDependencies表示编译过程中的一些依赖,这些依赖在打包后上线运行时是不存在的;readme:项目的一些描述文件;
编写vue组件
- App.vue
<template> <div id="tab"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/album">Album</router-link> <!-- 路由匹配的组件将渲染到这里 --> <router-view></router-view> </div></template><script> </script><style> a{text-decoration: none;font-size: 20px}</style>
- about.vue
<template> <h1>I am a about</h1></template><script> export default{}//把整个模块输出</script><style></style>
- album.vue
<template> <h1>I am a Album</h1></template><script> export default{}</script><style></style>
- home.vue
<template> <h1>I am a Home</h1></template><script> export default{}</script><style></style>
编写webpack编译的入口文件main.js
import Vue from 'vue'import App from './App.vue'import about from './components/about.vue'import home from './components/home.vue'import album from './components/album.vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//加载路由,vue在使用插件时候,需要用Vue.use()方法加载插件;const routes = [{//定义路由路径、路由组件等参数配置 path: '/about', component: about}, { path: '/home', component: home}, { path: '/album', component: album}]//创建router实例,传入路由配置const router = new VueRouter({ routes // (缩写)相当于 routes: routes})// 创建和挂载根实例,并注入路由,让整个项目都有路由功能new Vue({ router, render: h => h(App)}).$mount('#app')
安装路由,并运行项目
npm install vue-router --save-devnpm run dev
进入8080端口,初始页面
点击Alum,跳转到/aubum页面
- 用vue-router和webpack搭建路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- 使用webpack创建vue项目,安装vue-router和不安装vue-router的区别
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由
- webpack + vue项目搭建
- vue-cli和webpack项目搭建
- vue-2.x webpack 安装vue-router 配置路由
- vue环境搭建vue-cli,vue-router,webpack
- webpack管理Vue项目--组件和路由引入
- vue2+webpack+vue-router项目搭建--提升篇(添加eslint代码巡检)
- Vue--router-->>项目多路由嵌套--常用
- 从零搭建vue工程(vue-router,webpack)
- vue 路由vue-router
- vue路由 vue-router
- mysql分表和表分区详解
- Android经典Exception汇总
- zzuli-1858-单词翻转
- SSO单点登录
- 云服务器挂载磁盘
- 用vue-router和webpack搭建路由项目
- 创建型模式概括
- cp 复制文件或目录
- adb命令 查看logcat
- Linux TNS-12541 TNS-12560 TNS-00511 NO LISTENER
- 387. First Unique Character in a String字母表数组的运动
- PAT乙级(Basic)题库---1008
- SVN如何断开和服务器的连接
- 前端构建工具gulpjs的使用介绍及技巧