.vue文件怎么使用_vue搭建脚手架项目简单搭建

很久没更学习了 就不知道分享什么技术了 简单一个教程（这个也是写了好久了） 有错误欢迎指正

vue搭建脚手架项目教程

1. 全局安装vue-cli3 npm install -g vue-cli vue -V // 查看版本

2.创建一个名字为vue-demo的项目 vue init webpack vue-demo

3.进入项目 cd vue-demo

4.启动项目 npm run dev

启动后就是这个页面

vue新建项目,目录文件解释

2.

1、build文件夹是保存一些webpack的初始化配置。config文件夹保存一些项目初始化的配置。

2、node_modules是npm加载的项目依赖的模块。

3、src目录是我们要开发的目录，打开是这样的：

3.其中assets：用来放置图片 components:用来放组件文件 app.vue:是项目入口文件，代码如下：

4.App.vue相当于一个组件 main.js是项目的核心文件。代码如下：

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

这三句的意思是首先引入vue,然后引入了./App即App.vue文件。最后一句是引入一段路由配置。

然后是实例化new Vue .el:’#app’意思谁将所有的组件都放在id为app的元素中。components表明引入的文件，此处就是app.vue这个文件,这个文件的内容将以这样的标签写进#app中。

观察App.vue文件我们看可以看到一共有三个部分，分别是。

webpack在编译时可以将.vue文件中的这三部分抽出来合成cinderella单独的文件。

4、static文件夹用来放置静态资源目录

5、index.html是首页入口文件

6、package.json是项目配置文件

从一个路由跳到另一个路由的时候，传参数，在另一个路由里接收这个参数

现在你先把路由传参，组件传参搞懂，开发项目的时候，你得知道这个字段怎么传给另一个组件，并且传给后台

vue-router 路由动态传参 query和params的区别

/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params

/data?id=1 /data?id=2 这里的 id 叫 query

当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。

这句话怎么理解呢？看下边：

如果你要使用params传参，那么你的路由页面index.js必须带上参数，如下

{

path: '/detail/:id/',

name: "detail",

component: detail//这个details是传进来的组件名称

}

使用：

方法1：<router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮</router-link>

方法2：this.$router.push({name:'details',params:{id:123}})

页面url显示结果是：http://localhost:8081/#/details/123

如果你要使用query传参，那么你的路由页面index.js必须带上参数，如下

{

path: '/detail',//这里不需要参入参数，参见上面的params写法

name: "detail",

component: detail//这个details是传进来的组件名称

}

使用：

方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">点击按钮</router-link>

方法2：this.$router.push({name:'details',query:{id:123}})

方法3：<router-link :to="{ path: 'details', query: { id: 123 }}">点击按钮</router-link>

方法4：this.$router.push({path:'details',query:{id:123}})

页面url显示结果是：http://localhost:8081/#/details?id=123

这里看方法3,4,其实是对应方法1,2的，也就是说使用query方法，可以与path和name共用，2个都可以，但是params只能对应name。

要是想获取参数值：各自的获取方法是：

query和params分别是：this.$route.query.id，this.$route.params.id

顺便说一些参数是多个的情况

params传参，如果路由index.js如下：

{

path: '/detail/:id/:name',

name: "detail",

component: detail//这个details是传进来的组件名称

}

那么跳转写法：this.$router.push({name:'detail',params:{id:123,name:'lisi'}})