一、安装(npm)1、安装相关包
npm install npm //更新npm到最新版
npm install -g cnpm --registry=https://registry.npm.taobao.org //安装淘宝镜像
cnpm install vue //安装vue
cnpm install webpack //安装webpack
cnpm install -g vue-cli //全局安装vue-cli```
2、切换到你想放置项目的目录
vue init webpack projectname //创建项目[projectname]
进入生成的[projectname]文件夹
cnpm install //安装依赖
cnpm install vue-router //安装vue-router```
3、修改配置
在src目录下找到main.js,在new Vue()前添加如下代码
import VueRouter from 'vue-router' //引入vue-router
Vue.use(VueRouter) //安装
4、定义路由
在添加的代码下开始定义路由,以下是一个完整的示例
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入组件
import Hello from 'components/Hello.vue'
import Sx from 'components/sx.vue'
import Sb from 'components/sb.vue'
import Ssr from 'components/ssr.vue'
import Ssx from 'components/ssx.vue'
const myRouter = new VueRouter({routes: [{path: "/",component: Hello}, {path: "/sx",component: Sx}, {path:'/sb',component:Sb},{path:'/ssr',component:Ssr},{path:'/ssx/:id',component:Ssx}]})
new Vue({el: '#app',template: '',components: {App,Hello,Sx,Sb,Ssr,Ssx},router: myRouter })
5、在app.vue下添加相应路由标签
6、启动实时预览或者打包
cnpm run dev //开发环境预览
cnpm run build //打包到生产环境html css js
7、建议
1,建议看过vue官方的教程再查看本示例。
2,可以先不通过npm学习相关vue的内容,再逐步转换到npm方式上。
3,仔细看官方教程,vue:https://cn.vuejs.org/
4,代码块版本:地址