vue-cli脚手架教程

我不是女神ヾ 2022-12-19 11:58 458阅读 0赞

### 文章目录 ###

*   *  一，基础入门
     *   *  1，安装vue-cli
         *  2，初始化项目
         *  3，npm run 命令的区别
         *  4，使用图形化界面创建vue-cli项目
     *  二，开发
     *   *  1，vue-cli引入axios
         *  2，export default 和 export
         *  3，vue-cli引入vue-router路由
         *   *  ① 经典路由案例
         *  4，vue-cli跳转页面的方式
         *   *  ① router-link标签跳转
             *  ② js方法跳转
         *  5，vue-cli引入elementui组件
         *  6，el-upload上传组件上传成功之后获取图片信息
         *  7，vue-cli中axios跨域的问题
         *  8，vue-cli添加全局js
         *  9，elementUI upload上传文件时携带token
         *  10，vue-cli引入公用组件
         *  11，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为入口文件

![20200909142954701.png][]

![20200909143140775.png][]

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

![20200909143205387.png][]

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

![20200909143225744.png][]

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

![20200909143247687.png][]

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

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

![20200909143314805.png][]

## 二，开发 ##

### 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>
    
          <button v-on:click="sendRequest">发送axios请求</button>
          <div v-show="showText">
            {
       {msg}}
          </div>
    
      </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>
    
    
    
    <style scoped>  
    
    </style>

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

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

![20200910103321726.gif][]

### 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/>  
      </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. r o u t e . q u e r y . n a m e 和 t h i s . route.query.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值，这是子组件

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

先自定义个标签

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

import Top from "./Top";

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

components:{ 
        top:Top
    }

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

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

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

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

props:['touxiang','username']

[20200909142954701.png]: /images/20221120/adc93c4b3a5543cc97cfdd0f654dc6bf.png
[20200909143140775.png]: /images/20221120/551d9073e73d47e2a70d0eae71eae60d.png
[20200909143205387.png]: /images/20221120/1bab66b825b448468312cfe74ff98552.png
[20200909143225744.png]: /images/20221120/72f498d82fd4488c9f9b5c2c3e3e4522.png
[20200909143247687.png]: /images/20221120/9aa55adc14ff4dba864923eae122d8dc.png
[20200909143314805.png]: /images/20221120/58595478134542128c0e24c2c8ed28d6.png
[20200910103321726.gif]: /images/20221120/6059acbfd5bd4805ae9b4eb5bb5c6477.png