Vue——vue-cli 进行vue开发的脚手架工具

Vue全家桶：

　　（1）Vue基础

　　（2）VueRouter

　　（3）VueX

下面是一个路由示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../inputfiles/vue.js"></script>
    <script src="../../inputfiles/vue-router.js"></script>
</head>
<body>
    <div id = 'app'>
        <!--路由入口-->
        <router-link to='/index'>首页</router-link>
        <router-link to='/home'>家园</router-link>

        <hr>
        <!--路由出口-->
        <router-view></router-view>
    </div>

    <script>
        const routes = [
            {
                path:'/index',
                component:{
                    template:`
                <div>
                    <h1>这是INDEX页面</h1>
                </div>
                `
                }
            },
            {
                path:'/home',
                component:{
                    template:`
                <div>
                    <h1>这是home页面</h1>
                </div>
                `
                }
            }
        ]
        const routerObject = new VueRouter({
            routes:routes
        })
        var vm = new Vue({
            el:'#app',
            data:{},
            router:routerObject
        })
    </script>
</body>
</html>

1. Vue全家桶
　　Vue + VueRouter + VueX
2. VueRouter https://router.vuejs.org/zh/
　　基本使用
　　1. 必须导入vue-router.js文件
　　2. 要有VueRouter()实例
　　3. 要把VueRouter实例挂载到Vue实例中

4. 路由的入口
　　<router-link to='/index'>index页面</router-link>
5. 路由的出口
　　<router-view></router-view>
2. 路由的参数
　　1. path: '/user/:name' --> 匹配路由
　　$route.params.name --> 取值

2. /user/alex?age=9000 --> url中携带参数
　　$route.query.age --> 取出url的参数

3. 子路由

children:[
{
path: '',
component: {
template: `...`
　　}
　　}
]

<router-link to='info' append></router-link>

路由的第二种定义方式：path 也可以写成：path = '/index/:name?age=10' name可以用来匹配视图中的<router-link to = '/index/zsq'>赵世奇</router-link>,同时也可以带参数

使用方法：template:`<div>user{{$router.params.name}}</div>`

参数使用方法：<p>{{$router.query.age}}</p> #取到age的值

定义子路由

注意不要忘记加上append这个参数

3. vue-cli 进行vue开发的脚手架工具

1. 安装vue-cli 工具
npm install vue-cli -g --> 全局安装

vue init webpack 项目名 // 初始化一个vue项目

详细步骤：

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

$ vue init webpack test //输入命令

? Project name (test) test

? Project name test

? Project description (A Vue.js project) 测试项目

? Project description 测试项目

? Author lxx1024

? Vue build standalone

? Install vue-router? (Y/n) Y //安装路由

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n //Eslint验证,很严谨,所以选择n

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n) Y

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? (Y/n) Y

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "test".

To get started:

cd test

npm install

npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

# 安装依赖，走你

$ cd my-project

npm run dev 常见错误：

如果运行时，出现一下错误：

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

解决方法：

（1）npm cache clean --force # 强制清除缓存

（2）npm install --registry=https://registry.npm.taobao.org 安装淘宝镜像

（3）npm install webpack-dev-server -g 全局安装webpack开发服务包

（4）npm run dev # 运行程序

posted @ 2018-07-31 22:02 Coca-Mirinda 阅读(305) 评论(0) 编辑收藏举报

刷新页面返回顶部

Coca-Mirinda

Vue——vue-cli 进行vue开发的脚手架工具

公告