vue项目架构起步

1、$ vue init webpack vue_project    建立并初始化vue_project项目
2、$ cd vue_project             进入到项目文件夹中
3、$ cnpm install              下载项目依赖包
4、$ npm run dev               测试项目是否初始化成功

前面4个步骤如果能成功的在浏览器端弹出vue主界面，则表示项目初始化成功，

用编辑器打开你这个项目的文件夹，找到 index.html然后手动去添加视口

 

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

 

5、 $ cnpm install --save-router 下载路由模块
6、 在编辑器里面打开项目,并找到main.js使用import VueRouter from "Vue-router" 去导出路由模块
7、 再去全局使用路由模块 Vue.use(VueRouter)
8、 然后在"src"目录下创建一个文件夹 "pages"
9、 在"pages"目录系下再创建 "Home.vue" "Market.vue" "Cart.vue" "Mine.vue"四个文件
10、在4个文件中以如下格式写入代码：
<template>
      <div id="home">
              <h1>我是主页</h1>
       </div>
</template>

<script>
        export default {
               name: "home",
               data () {
                       return{
                             msg: "我是主页"
                       }；
              }
         }
</script>

<style  scoped>
             #home{
                        color: pink;
             }
</style>

 

11、再去main.js中分别取导入模块
import Home from "./pages/Home.vue"
import Cart from "./pages/Cart.vue"
import Market from "./pages/Market.vue"
import Mine from "./pages/Mine.vue"

 

12、配置路由规则
const routes = [
{path: "", component: Home},
{path: "/home", component: Home}
{path: "/cart", component: Cart}
{path: "/market", component: Market}
{path: "/mine", component: Mine}
]

 

13、创建路由实例
const router = new VueRouter({
routes: routes
})

 

14、将创建出来的实例挂载在vue实例中
new Vue ({
router: router
})

15、然后在APP.vue中使用，使其渲染到页面上
<router-link to="/home">首页</router-link>
<router-link to="/cart">购物车</router-link>
<router-link to="/market">闪送超市</router-link>
<router-link to="/mine">我的</router-link>