vue-cli搭建与使用

vue-cli搭建与使用

安装 vue-cli

cnpm install vue-cli -g

测试是否安装成功

创建一个基于 webpack 模板的 vue 应用程序

这里的 myvue 是项目名称，可以根据自己的需求起名

vue init webpack myvue

一路都选择no即可;

Project name：项目名称，默认 回车 即可

Project description：项目描述，默认 回车 即可

Author：项目作者，默认 回车 即可

Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）

Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）

Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）

Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）

Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 n，我们手动执行;运行结果!

初始化并运行

cd myvue

npm install

npm run dev

vue-cli目录结构

集成vue-router

命令行中输入npm install vue-router -g来安装vue-router，安装完之后我们可以打开package.json文件，在package.json文件中可以看到vue-router的版本号

在src目录下新建router文件夹和views文件夹

在router文件夹下新建router.js,并写入代码

//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用page1页面
import page1  from '../views/page1.vue';
//引用page2页面
import page2  from '../views/page2.vue';
import index from '../views/index';
//定义routes路由的集合，数组类型
const routes=[
    //单个路由均为对象类型，path代表的是路径，component代表组件
    {
        path:'/page1',
        component:page1
    },
    {
        path:"/page2",
        component:page2
    },{
        path: "",
        component: index
        //路由嵌套
        // children:[{
        //     path:'/page1',
        //     component:page1
        // }]
    }
]

//实例化VueRouter并将routes添加进去
const router=new VueRouter({
    //如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头
    //mode: 'history',
//ES6简写，等于routes：routes
    routes
});

//抛出这个这个实例对象方便外部读取以及访问
export default router

在views目录下新建三个文件,index.vue,page1.vue,page2.vue

index.vue

<template>
    <div>
<!--   hash模式、跳转写法     -->
<!--        <form action="#/page1" method="get">-->
        <form action="#/page1" method="get">
            <input type="text" name="my-in" id="">
            <input type="submit" value="提交">
        </form>
    </div>
</template>

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

<style scoped>

</style>

page1.vue

<template>
    <div>
        <h1>这是page1</h1>
        <p>{{mag}}</p>
    </div>
</template>

<script>
    export default {
        name: "page1",
        data() {
            return {
                msg: "我是page1的对象"
            }
        }
    }
</script>

<style scoped>

</style>

page2.vue

<template>
    <div>
        <h1>我是page2页面</h1>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: "page2",
        data(){
            return {
                msg:"这是page2"
            }
        }
    }
</script>

<style scoped>

</style>

在App.vue添加<router-view></router-view>标签

修改一下main.js

import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router/router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

标签：index,vue,cli,import,router,搭建,page2,page1
来源： https://www.cnblogs.com/2393920029-qq/p/15272054.html