Vue.js2.0移动端单页面应用

Article 2016-12-06 欢迎您加入IT交流群:123493055IT交流群

这个框架太火啦,不学都要落后啦,我一般是先让其跑起来,然后再恶补基础,哈哈,表示好多都不太懂,webpack不会,vue的所有都是刚接触,前端就是这样要不断学习才行,按照网上的demo依葫芦画了个瓢~哈哈~

前言

快速搭建

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
$  vue init webpack vue-cnode-demo

?Project name (my-first-vue-project) \\输入项目名称
?Project description (A Vue.js project) \\输入项目描述
//输入Author
Runtime + Compiler: recommended for most users \\选择此项
?Use ESLint to lint your code?(Y/n)\\是否ESlint以作为语法检查工具 (N)
?Setup unit tests with Karma + Mocha?(Y/n) \\是否需需要单元测试 (N)
?Setup e2e tests with Nightwatch?(Y/n) (N)

#给出提示打开目录中文件,文件安装 package.json中的依赖包
$ cd vue-cnode-demo
$ npm install \\安装依赖,会多出node_modules文件夹
$ npm run dev \\运行 http://localhost:8080

打开界面就可以看到我们的应用

项目结构

(因为init指令最后面三项选择的时候选的no,所以没生成test目录)

├── build/                      # webpack config files
│   └── ...
├── config/                     
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

路由配置vue-router2

安装

npm install vue-router

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routers';
Vue.use(VueRouter)

const router = new VueRouter({
  routes 
})

const app = new Vue({
  router
}).$mount('#app')

routers.js

const Home = resolve => {
	require.ensure(['./views/home.vue'], () => {
		resolve(require('./views/home.vue'));
	});
};

const List = resolve => {
    require.ensure(['./views/list.vue'], () => {
        resolve(require('./views/list.vue'));
    });
};

const routers = [{
	path: '/',
	name: 'home',
	component: Home
}, {
	path: '/list',
	name: 'list',
	component: List
},{
    path: '*',
    component: Home
}]

export default routers;

demo源码及演示地址

源码:https://github.com/itguliang/vue-cnode-demo

演示地址:https://itguliang.github.io/vue-cnode-demo/

注:凡原创文章转载请注明出处(有好的建议和意见可以联系我(*^__^*))