npm、vue开发环境搭建及路由介绍

npm、vue开发环境搭建及路由介绍

nodejs、npm安装（windows）

下载 https://nodejs.org/en/download/

点击下一步安装

node –version查看版本

npm升级 npm install npm -g

查看全局模块安装信息: npm list -g

npm i -g npm-upgrade 更新

vue安装及工程创建(一定要用淘宝镜像，不然卡死)

npm install -g cnpm –registry=https://registry.npm.taobao.org #如果下载不下来，换成cnpm执行vue相关包安装

cnpm install vue

cnpm install -g webpack

cnpm install -g vue-cli

vue init webpack-simple project-name

1、 webpack–全功能的Webpack + vueify，包括热加载，静态检测，单元测试

2、 webpack-simple–一个简易的Webpack + vueify，以便于快速开始

cd project-name

cnpm install

cnpm run dev

异常处理

npm安装过程中提示optional install error: Package require os(darwin) not compatible with your platform(win32)解决方法 见: https://www.cnblogs.com/lansan0701/p/7019031.html

vue2.0路由配置

npm install vue-router （vue-router 2只适用于Vue2.x版本）

cnpm i element-ui 安装element-ui

code

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const page404 = { template: '<div>page404</div>' }

//懒加载
const routes = [
{
//当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面
path:'/', //重定向，就是给它重新指定一个方向，加载一个组件；
component:resolve => require(['./components/first.vue'], resolve)
},
{
path:'/first',
component:resolve => require(['./components/first.vue'],resolve)
},
{
path:'/second',
component: resolve => require(['./components/second.vue'],resolve)
},
{
path:'/third',
component: resolve => require(['./components/third.vue'],resolve)
},
{
path:'/fourth',
component: resolve => require(['./components/fourth.vue'],resolve),

// 子路由
children:
[
{
path: '/f1',
component: resolve => require(['./components/fourth_child/f1.vue'], resolve)
},
{
path: '/f2',
component: resolve => require(['./components/fourth_child/f2.vue'], resolve)
},
]
},

{
//重定向
path: '/aaa', redirect: '/'
},

{   // 根目录重定向
path: '*', component: page404
},
//这里require组件路径根据自己的配置引入
]

//3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes
})

//4. 创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
el: '#app',
router, // 注入到根实例中
render: h => h(App)
})

App.vue

<template>
<div id="app">
<router-link to="/third">跳转第三个页面</router-link>
<router-link to="/fourth">跳转第四个页面</router-link>
<div class="containor">
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
</template>

<script>
export default {
name: 'app'
}
</script>

子路由页面fourth.vue

<template>
<div>
<div>我是第四个页面</div>
<div>
<router-link to="f1">嵌套路由1</router-link>
<router-link to="f2" active-class="u-link--Active">嵌套路由2</router-link>
</div>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

</div>
</template>