vue2.0开发实践总结之入门篇

npm i -g vue-cli

vue init webpack demo
cd demo
npm i

npm run dev 
 //npm run xxx 是执行配置在package.json中的脚本
e.g: 它会去找到package.json的scripts对象，执行node bulid/dev-server.js

module.exports = {
build:{
 assetsSubDirectory: 'static', //修改这里成你项目放置静态文件的目录
 assetsPublicPath: './', //修改这里成你项目放置静态文件的目录
 }
}

npm install node-sass --save-dev
npm install sass-loader --save-dev 

//--save-dev 会将该依赖写入package.json，方便别人安装依赖

 {
 test: /\.scss$/,
 loaders: ["style", "css", "sass"]
 }

--build 
--config 
--dist //npm run build 之后再生成的目录
--src 
 --components // 用于存放组件
 --page //页面组件，由vue-router引入
 --router //路由
 --store // 数据流管理
 main.js //入口文件
 app.vue //主组件 
--static //静态文件目录
.babelrc 
.gitignore //git忽略上传文件
index.html //静态文件入口

import Vue from 'vue'
import router from './router/router'
import store from './store/store'

Vue.config.debug = true //开启debug模式
window.log = console.log
let data = {
 router,
 store
}
new Vue(data).$mount('#app') 

 //创建一个app实例，并且挂载到选择符#app匹配的元素上 在根目录html里面 

 let data = {
 el:'#app', 
 router,
 store
}

<template>
 <div class="com-app">
 <com-header></com-header> 
 <transition :name="transitionName">
 <router-view class="child-view"></router-view>
 </transition>
 <com-footer v-show="isFooter"></com-footer>
 <com-loading v-show="loading"></com-loading>
 </div>
</template>

const routes = [
 {
 path: '/',
 component: App,
 children: [
 {path: '/index/:type', name: 'index', component: Index},
 {path: '/home', name: 'home', component: Home},
 {path: '/HomeUserInfo/:uid', name: 'homeUserInfo', component: HomeUserInfo},
 {path: '/article/:id', name: 'article', component: Article},
 {path: '/addmsg', name: 'addMsg', component: AddMsg},
 {path: '/search/:types', name: 'searchresult', component: SearchResult},
 {path: '/login', name: 'login', component: Login},
 {path: '/register', name: 'register', component: Register},
 {path: '/modif', name: 'Modifi', component: Modifi},
 {path: '/admin', name: 'Admin', component: Admin}
 ]
 }
]
const router = new VueRouter({
 routes: routes, // short for routes: routes
 linkActiveClass: 'active', // router-link的选中状态的class，也有一个默认的值
 history: true
})