vue-cli3 之【框架搭建】教程

  1. 云栖社区>
  2. 博客>
  3. 正文

vue-cli3 之【框架搭建】教程

avillin 2019-07-25 18:35:28 浏览711
展开阅读全文

同学们好,今天我们简单说一下vue.js 3.0的框架搭建方法。

或许有的同学还不知道vue3.0与之前的版本有了哪些改动,可以查查相关资料。主要改动是优化了节点,减少了无谓的遍历,优化速度提升了6倍!

那么vue-cli3.0框架与之前又有了一些变化,我们简单说几个:

1、名字改了,以前叫vue-cli,现在叫@vue/cli
2、buildconfig文件包被移除了。那么build打包文件,以后会在我们打包的时候自动的生成dist了,一些配置也被优化到了项目当中。config文件也是同样如此;
3、新增文件public,我们每次看到的根文件index.js它被移入到了public当中,里边除了这个入口文件外,还把网页ico图标存放到这里;
4、src文件件下自动帮我们新增了view文件夹,以后就可以直接在这里放我们的页面文件了,也统一了一下大江南北各种奇葩的命名。
5、除了这些,一些插件也有了一些变化,具体我们稍后会代入讲解。
6、还有一个比较智能化的增加:vue ui。稍后我们再说。
7、运行后增加了Network本地运行网址,好处是开发移动端,我们可以边开发,边在手机上看到效果,兼容问题一目了然。

-----------------


----- 铺垫了这么多,接下来我们开始框架的搭建教程:-----


-----------------

1、重新安装3.0

刚才说过了,cli3的脚手架名称改成了@vue/cli所以我们就不能覆盖之前的版本了,我们想要用3.0开发新项目,就需要先把以前的卸载掉:
卸载方法:npm uninstall vue-cli -g
️️苹果mac本卸载需要加上管理员权限,也就是在前边加上sudo,否则会报错。sudo npm uninstall vue-cli -g,回车后需要输入电脑开机密码(输入时是看不到的,输入完直接回车键就ok)。

下载vue-cli3:

npm install -g @vue/cli  // mac本前边还是一样,要加sudo : sudo npm install -g @vue/cli

下载完可以输入vue --version看一下是不是3**的版本。

vue --version
// 3.9.3

2、创建项目

用命令行vue create 项目名称可以创建一个项目框架,项目名称不要使用驼峰命名。比如我们创建一个名称为villin的项目:

vue create villin

3、输入项目配置

创建项目后和以前一样,会询问一些配置问题。

注意:个别电脑第一次创建时,会询问是否加速开发工作流,输入y回车就好。以后就不会再询问了

首先会让你选择一个预设配置preset,如果有配置过会记载上,可以选择以前配置过的,如图片中的name是我之前配置的。
如果没有会出现两个配置让你选择,一个基本的 Babel + ESLint ,一个是更多配置,我们第一次可以手动选择更多配置:
键盘上下箭头选择,回车确认

image

接着选择自己想要的配置:我选择了Babel转码,Router、Vuex、CSS Pre-processors、Linter / Formatter格式这四个;
上下箭头移动,空格选择,回车确认

image

接着让你选择模式,是否是history模式,因为history模式还需要后台配合,所以本次选择否。

image

接着选择sass模式,我们选择node-sass,它可以进行时时编译。

image

接着选择ESLint代码规范,我选择了第三个,可以进行纠正代码。

image

接着选择什么时候检查代码,我选择第一个,保存就检查。第二个是commit时检查,不建议。

image

接下来会询问配置的存放位置,我们选择第一个单独存放。第二个是放在package.json中。

image

接着询问是否需要保存这些配置?
还得即刚刚第一次询问的预设配置?第一次那个name就是之前保存的,这次你可以保存

image

为这个保存的配置起个名字:

image

ok,回车开始运行,稍等片刻,我们这个框架就配置完成,打开就是这个样纸。

image

我们可以运行起来

npm run serve

运行后,就是这个样子的,我们可以将Local后的地址放在浏览器打开就能运行了。
注意看,它比以前多了一个地址Network。如果进行移动端开发,在同一个局域网下,将这个地址放在手机浏览器中打开,会直接看到开发的效果,也能直接反映出兼容性问题,这个对自测来说,非常有用。
关于以前版本怎么自测,可以参考我之前的文章:https://yq.aliyun.com/articles/709164?spm=a2c4e.11155435.0.0.2eff3312pboMcM

image

-----------------


----- 接下来我们搭建所需要的功能:-----


-----------------

引入axios

axios是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

首先我们需要在这个项目当中,下载axios

npm install axios

src目录下创建一个utils文件夹,文件夹中创建一个放axios 的 js文件,这个名字随便起,要么http.js 或者 request.js 都行。我以http.js为例,我们来写一个axios拦截器配置文件:
如果理解不了axios,建议先去学一学ajax,参考文章: https://yq.aliyun.com/articles/710192?spm=a2c4e.11155435.0.0.2eff3312pboMcM

// http.js 文件
import axios from 'axios'

// 自定义创建 axios 实例
const http = axios.create({
  baseURL: process.env.baseURL, // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  timeout: 10000 // 请求超时时间
})

// request 添加请求拦截器
http.interceptors.request.use(
  config => {
     // 在发送请求之前做些什么可以写在这个位置
    return config
  },
  error => {
    //  对请求错误做些什么在这个位置写

    console.log(error)
    Promise.reject(error)
  }
)

// response 添加响应拦截器
http.interceptors.response.use(
  response => {
   // 这里是收到了response请求,数据一般存放在下边的data中,所以我们创建一个res,获取到这个data
    const res = response.data
    
    return res
  },
  error => {
    // 这里放置response返回错误时的逻辑,错误码会放在```status```当中,我们可以进行一些错误码的判断:
    if(error.response){
      switch(error.response.status){
        case 401:
        // 401时的操作
        break
        case 502:
        // 402时的操作
        break
        case 500:
        // 500时的操作 
        break
        // ️注意,这些错误码都是随便举的例子,具体要和项目当时返回的数值而定,去和后端确定错误码。
      }
    }

    return Promise.reject(error)
  }
)

export default http

以上就是axios的拦截器配置。拦截器用于联调接口时,返回各种错误问题的拦截,我们可以相应的给到用户反馈,比如登陆密码错误,再比如网络连接失败等,我们可以根据错误码作出相应的提示。
配置完,我们可以创建一个单独的 js 文件,用于统一存放后端接口的。刚才在utils 中 创建了http.js 文件,我们同样,再次在这个文件夹中创建一个 api.js 文件用于存放接口方法,看下目录结构。
image

接口就需要引入我们刚刚配置的拦截器,首先我们在 api 文件中需要引入刚才的文件。

// api.js文件

import axios from './http'

  // 例如 后端给两个接口,一个叫 ```/IndexPage``` 的接口,发送的 ```get``` 请求,
  // 一个叫 ```/IndexPage/submitTicket``` 的接口,发送的 ```post``` 请求,
  // 我们可以定两个变量名叫“page” 和 “ticket”
  
  // page接口 params接收参数,返回给接口
  page : params => axios.get('/IndexPage', { params }),

  // ticket接口
  ticket : params => axios.post('/IndexPage/submitTicket',  params ),
  

这样就联调了接口。那我们怎么在页面中得到接口返回的信息呢?我们在需要的界面中按需引入 api.js ,然后获取到这个信息,按照promise的方法就可以获取到信息:

<template>
    <div>

    </div>
</template>

<script>
import api from '@/utils/api'  // 引入api文件
export default {
    data(){
        return{

        }
    },
    methods:{

        // 在methods中调用接口

        homeApi(){
            api.page().then(res => {
                // 这里就是page接口,返回的信息,我们可以判断状态,成功后返回接口信息

                if(res.status === 200){
                    // 当状态为200时,这里返回接口信息
                    console.log(res)
                }else{
                    // 如有有错误需求,可以在这里写
            }
            })
        },


        // 如果需要传参,可以定义一个变量params,把参数放在这里,然后放在需要的接口中就好。
        ticket(){
          params{
            参数key:参数value
          }
            api.ticket(params).then(res => {
                // 这里就是page接口,返回的信息,我们可以判断状态,成功后返回接口信息

                if(res.status === 200){
                    // 当状态为200时,这里返回接口信息
                    console.log(res)
                }else{
                    // 如有有错误需求,可以在这里写
            }
            })
        },
    }
}
</script>

这样一个axios就布置完成了

-----------------


----- 接下来我们做webpack相关的配置和代理:-----


-----------------

这些配置需要我们创建一个新的文件,这个文件名是固定的vue.config.js,要求必须和 package.json 文件同级,也就是最外层。
我们创建一个 vue.config.js 文件。这个文件它会被 @vue/cli-service 自动加载,自动识别出内置的配置。
参考官网https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

image

在这个文件里我们就可以做我们想要做的配置了,举几个常见的例子。

// vue.config.js

const path = require('path')

// 封装打包路径连方法 根据项目可自己封装
function join (dir) {

  return path.join(__dirname, dir)
  
}
// 封装路径解析方法 根据项目可自己封装
function resolve (src) {

  return path.resolve(__dirname, src)

}

module.exports = {

 // 配置test pre等环境;
 publicPath: process.env.NODE_ENV === 'production' ? '/自己项目的路径path/' : '/' //baseUrl从 Vue CLI 3.3 起已弃用,请使用publicPath。

 // loader配置,如css loader
 css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  }
  
  // 跨域proxy配置
  devServer: {
    '/v4': {
        target: 'https://v4/home/', // 对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/v4': '/v4'
        }
      },
  }
}


其他配置信息,官网最全。
参考官网https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
项目架构很多中搭配方法,知识也应用到webpack和node,大家可以多多学习。

开始的时候还提到过 vue ui, 十一个图形化工具,可以在页面中创建项目,并且可以搜索下载各种插件,非常方便。
在命令行中运行vue ui即可。
然后弹出页面后,就可以在其中创建项目,目前在公司中实用性还不算太普及,同学们可以自行操作一边,了解一下未来前端发展的趋势也是好的。

这篇文章写的很累,就先到这里,发现问题可以及时沟通,最后希望对大家有所帮助。

博主联系方式:
e-mail:avillin@163.com
weChat:VillinWeChat

网友评论

登录后评论
0/500
评论
avillin
+ 关注