首页 > 其他分享> 文章详细

vue-cli搭建与使用

2021-09-15 14:35:31 阅读：230 来源： 互联网

标签：index vue cli import router 搭建 page2 page1

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-cli搭建与使用

vue-cli搭建与使用