1.安装vue-cli,(必须先安装webpack)

//global全局安装
npm install --global vue-cli

2.初始化项目

简单版:

//vue init webpack-simple 项目名
vue init webpack-simple testsimple

完整版:

//vue init webpack 项目名
vue init webpack test

vue-router是路游的插件,以下使用完整版进行操作,安装基本上全部默认就可以了,如果有需要后面在进行更改

3.安装scss支持

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


4.编写页面Gard.vue、Film.vue、Home.vue

注意:在编写内容的时候必须添加一个外层div,否则会报错

5.配置/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Gard from '@/components/Card.vue'
import Film from '@/components/Film.vue'
import Home from '@/components/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: Gard
    },
    {
      path: '/g',
      component: Gard
    },
    {
      path: '/f',
      component: Film
    },
    {
      path: '/h',
      component: Home
    }
  ]
})


配置完成之后需要指定在哪个位置使用路游,所以还需要配置

6.完成进行测试

本次就讲这么多了,如果有错,欢迎指出

标签: Webpack, vue

添加新评论