vue-cli搭建与使用

时间:2021-09-15
本文章向大家介绍vue-cli搭建与使用,主要包括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")

原文地址:https://www.cnblogs.com/2393920029-qq/p/15272054.html