vue-cli脚手架教程

一，基础入门

1，安装vue-cli

安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。

如果npm没有问题，接下来我们可以用npm 命令安装vue-cli了，在命令行输入下面的命令

npm install vue-cli -g

-g :代表全局安装。如果你安装时报错，一般是网络问题，你可以尝试用cnpm来进行安装。安装完成后，可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。

如果vue -V的命令管用了，说明已经顺利的把vue-cli安装到我们的计算机里了。

2，初始化项目

使用命令行来初始化一个vue-cli脚手架项目（常用初始化命令如下）

vue init webpack projectname

格式

vue init <template-name> <project-name>

格式说明

init：表示我要用vue-cli来初始化项目

<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，

webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。

-simple-一个最简单的单页应用模板。

<project-name>：标识项目名称，这个你可以根据自己的项目来起名字。

在实际开发中，一般我们都会使用webpack这个模板。

执行命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了！

Project name :项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest

Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。

Author：作者，如果你有配置git的作者，他会读取。

Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。

setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。

Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

然后项目就构建完成了！

cd vuecliTest 进入我们的vue项目目录
npm install 装我们的项目依赖包，也就是安装package.json里的包，如果你网速不好，你也可以使用cnpm来安装
npm run dev 发模式下运行我们的程序

3，npm run 命令的区别

npm run dev：在本地调试，把项目在本地运行起来

npm run build：打包项目

我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来，但是现在我们要把他放到服务器上的话用npm run build命令就可以啦。

在projectname项目目录下执行 npm run build ，打包项目，打包完成之后，我们就可以像打开静态网页一样打开我们完成的项目。

下图为打包生成的dist文件夹，其中index.html为入口文件

这时你打开了index.html文件，发现网页一片空白，打开F12发现console报了几个错误

这是因为引用资源的路径问题，我们只要在下图的地方修改一下再打包就可以了，需要修改的文件在项目目录下的config文件夹里的index.js文件中

改完，再次执行npm run build，然后打开index.html成功访问vue脚手架项目。

4，使用图形化界面创建vue-cli项目

运行 vue ui 命令可以打开 vue项目管理器（视图界面），可以根据需求自定义创建项目，如下图

二，开发

1，vue-cli引入axios

终端进入到vue-cli项目的根目录，执行命令行，安装axios（下面两个都需要）

npm install axios

npm install --save axios vue-axios

然后在 main.js 中引入

import Vue from 'vue'
import App from './App'
import router from './router'
/* 引入axios开始 */
import vueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(vueAxios,axios)
/* 引入axios结束 */

Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在 HelloWorld.vue 中修改

<template>
  <div>
<!-- template内容开始（外围必须包裹一个div，因为组件只允许有唯一的一个根元素） -->
      <button v-on:click="sendRequest">发送axios请求</button>
      <div v-show="showText">
        {{msg}}
      </div>
<!-- template内容结束 -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      showText:false,
      msg: ''
    }
  },
  methods:{
      sendRequest(){
        // axios请求开始
        this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response=>{
            this.msg = response.data.bpi
            console.log("axios请求成功");
        })
        .catch(function (error) {
        console.log(error)
        })
        // axios请求结束
        this.showText=true
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- style加上scoped表示此css样式只在本模块中有效 -->
<style scoped>  

</style>

npm run dev启动本地项目，http://localhost:8080进入项目首页

点击按钮发送axios请求回显到msg中

2，export default 和 export

Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块
export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

export 和export default 的区别在于：export 可以导出多个命名模块，例如

//demo1.js
export const str = 'hello world'

export function f(a){
    return a+1
}

对应的引入方式

//demo2.js
import { str, f } from 'demo1'

export default 只能导出一个默认模块，这个模块可以匿名，例如

//demo1.js
export default {
    a: 'hello',
    b: 'world'      
}

对应的引入方式

//demo2.js
import obj from 'demo1'

引入的时候可以给这个模块取任意名字，例如 "obj"，且不需要用大括号括起来。

3，vue-cli引入vue-router路由

（1）在package.json文件中的dependencies中添加路由及其版本，如果有的话可以忽略。

"dependencies": {
    "axios": "^0.20.0",
    "vue": "^2.5.2",
    "vue-axios": "^2.1.5",
    "vue-router": "^3.4.3"
  }

（2）npm安装

npm install vue-router --save

（3）在index.js路由文件中引入路由

import Router from 'vue-router'
Vue.use(Router)

（4）在src/components文件夹下新建test.vue等组件，然后再index.js路由文件中进行配置组件

routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/test',
      name:'test',
      component:test
    },
    {
      path:'/test2',
      name:'test2',
      component:test2
    }
  ]

① 经典路由案例

App.vue是脚手架的入口页面，添加路由链接

/test 和 /test2 就是上面配置好的组件

<template>
  <div id="app">
    <router-link to="/test">test页面</router-link>
    <router-link to="/test2">test222页面</router-link>
    <router-view/>  <!-- 匹配到的路由组件会显示到router-view容器中 -->
  </div>
</template>

效果：点击两个菜单，路由到不同的页面中

4，vue-cli跳转页面的方式

① router-link标签跳转

 <router-link to='/citylist'><div class="header-right">城市</div></router-link>
<router-link :to="{path:'/partysubject',query:{id:3}}">城市</router-link>

② js方法跳转

<button @click = "func()">跳转</button>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({name: '/order/page1',params:{ id:'1'}});
            }
        }
    }
</script>

补充第二种方式

this.$router.push({path: ''/order/index''});
this.$router.push({path: '/order/page1',query:{ id:'2'}});
this.$router.push({name: '/order/page2',params:{ id:'6'}});

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

5，vue-cli引入elementui组件

（1）命令安装elementui

npm i element-ui -S

（2）也可以在package.json中的dependencies添加依赖，然后npm install安装

装了elementui之后，在main.js中添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'  //单独引入样式文件
Vue.use(ElementUI)

然后就可以使用elementui组件了。

6，el-upload上传组件上传成功之后获取图片信息

el-upload上传组件上传成功之后获取图片信息（图片在服务器上的存储路径等相关信息）并保存到data中，供表单提交

<el-upload
        class="upload-demo"
        action="/api/lifespace/uploadImage"
        name="file"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-success="savePic"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

使用element-ui中的上传组件,upload,这个默认发送post请求,
在使用upload组件自动携带的请求方式发送
action->请求的url
on-success->请求发送成功的钩子–方法function(response, file, fileList)默认参数3个
auto-upload->是否在选取文件后立即进行上传,默认是true(选取文件即上传)
name->上传的文件字段名,默认值file,后台有时候需要发送别的字段名如image就这修改
data->上传时附带的额外参数object
disabled->是否禁用,默认false
http-request->覆盖默认的上传行为，可以自定义上传的实现–方法(当请求方式不为post可以自定义方式)

	uploadSuccess(response,file,fileList){
      const array=response;
      console.log(array)
      this.picList.push(array)    
    }

7，vue-cli中axios跨域的问题

在config文件夹下的index.js文件中的proxyTable字段中，作如下处理

proxyTable: {
      '/api':{
        target:'http://localhost:8081',//后端地址
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      }
    }

在具体使用axios的地方，修改url如下即可

 		this.axios.post('/api/lifespace/saveContent',{content:contents})
        .then(response=>{
            console.log(response.data);
        })
        .catch(function (error) {
        // console.log(error)
        })

8，vue-cli添加全局js

填写全局config.js

function getConfig(str){
      return "test";
}
 
 
//暴露的方法
//公开的方法
export default {
  getConfig:getConfig,//获取 公共配置方法
}

main.js 引入当前文件

import getMyConfig  from './assets/js/config'
Vue.prototype.$getMyConfig = getMyConfig;//引入配置文件

这时就可以使用了，使用方法如下（获取test字符串）

var ajaxurl = this.$getMyConfig.getConfig('ajaxurl');

9，elementUI upload上传文件时携带token

前端

<template>
    <el-upload action="test" :headers="importHeaders"></el-upload>
</template>
<script>
var mytoken =  localStorage.getItem('token') // 要保证取到

export default {
    data () {
        return {
            importHeaders: {token: mytoken}
        }
    }
}
</script>

后端

@PostMapping("/test")
public R upload(MultipartFile file, HttpServletRequest request) {
    String token=request.getHeader("token");
    System.out.println("获取token==="+token);
}

10，vue-cli引入公用组件

现在components文件夹下新建一个公用组件vue文件，写好组件之后，在export default 中定义组件名称name值，这是子组件

然后在父组件中引入该子组件进行使用，如下

先自定义个标签

<top></top>

然后在script标签中引入子组件

import Top from "./Top";

然后再export default {} 中把引入的子组件赋给自定义标签即可

components:{
    top:Top
}

11，vue-cli父组件向子组件传值

上面第10条只是引入了子组件，但是父组件的变量是传递不到子组件中的，因此需要如下操作

需要传入的变量在data中定义好，然后使用v-bind进行绑定到自定义标签上

<top v-bind:touxiang="touxiang" v-bind:username="username"></top>

这样父组件的变量就传到了子组件，然后子组件使用如下方式接收，这样在子组件中就可以使用变量了，例如：{{username}}

props:['touxiang','username']

posted @ 2020-11-14 13:13 你樊不樊阅读(190) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

樊不樊