vue搭建项目

搭建开发环境

Vscode：https://code.visualstudio.com/
Node：http://nodejs.cn/
Git：https://git-scm.com/
npm 淘宝镜像:http://npm.taobao.org/

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list

脚手架工具 Vue-Cli

安装 vue-cli:

# 安装vue2.X
npm install vue-cli -g

# 安装vue3.X
npm install -g @vue/cli

# 输出版本号说明安装成功
vue --version

# 进入你的项目目录
cd workspace

创建一个基于 webpack 模板的 vue 应用程序:

# 这里的 mytest 是项目名称
vue init webpack mytest //vue2.X

vue create mytest //vue3.X

# 初始化并运行
npm install

npm run dev //vue2.X

npm run serve //vue2.X

目录详解

# 安装vue2.X
1、build：构建脚本目录
　1）build.js ==> 生产环境构建脚本；
　2）check-versions.js ==> 检查npm，node.js版本；
　3）utils.js ==> 构建相关工具方法；
　5）webpack.base.conf.js ==> webpack基本配置；
　6）webpack.dev.conf.js ==> webpack开发环境配置；
　7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置
　1）dev.env.js ==> 开发环境变量；
　2）index.js ==> 项目配置文件；
　3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录：
　1）assets：资源目录；
　2）components：组件目录；
　3）icons：svg图标；
　4）lang：语言汉化；
　5）layout：界面布局；
　6）router：前端路由；
　7）store：vuex文件；
　8）styles：全局样式；
　9）utils：公共函数方法；
　10）views：页面组件；
　11）App.vue：根组件；
　12）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

# 安装vue3.X
1、public：
　1）favicon.ico ==> 网页logo；
　2）index.html：首页入口文件，可以添加一些 meta 信息等

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

3、src：这里是我们要开发的目录：
　1）assets：资源目录；
　2）components：组件目录；
　3）icons：svg图标；
　4）lang：语言汉化；
　5）layout：界面布局；
　6）router：前端路由；
　7）store：vuex文件；
　8）styles：全局样式；
　9）utils：公共函数方法；
　10）views：页面组件；
　11）App.vue：根组件；
　12）main.js：入口js文件；

4、config：项目配置
　1）vue.config.js ==> 配置环境变量；//一级目录自建

5、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

6、README.md：项目的说明文档，markdown 格式

7、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

//vue.config.js
module.exports = {
  baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
  // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
  // outputDir: 'dist',
  // pages:{ type:Object,Default:undfind }
  devServer: {
    port: 8888, // 端口号
    host: 'localhost',
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    } // 配置多个代理
  }
}

安装 vuex、axios、elemnet-ui、sass、less 等依赖

Axios 依赖:

npm install axios

在项目根目录下添加文件夹 utils，新建文件 interceptor.js，添加如下代码：

// 在官方的axios的基础上封装一个添加拦截器的axios
import axios from 'axios'
// 引入路由
import router from '../src/router'

// 配置默认的请求地址头（process.env.VUE_APP_Back）这是走得配置文件中配置的地址，需要改成自己的地址
axios.defaults.baseURL = process.env.VUE_APP_Back

// 全局添加拦截器的作用是可以在每个API前面加上headers的token验证
axios.interceptors.request.use(config => {
  // 判断token是否存在和是否需要token验证的路由
  if (sessionStorage.getItem('token')) {
    config.headers.Authorization = sessionStorage.getItem('token')
  }
  return config
})

// 处理退出响应的拦截器 err可以捕获状态，来进行响应的处理
axios.interceptors.response.use(
  response => {
    // 当状态码等于200时
    if (response.status === 200) {
      const res = response.data
      // 如果code是-1 说明用户注销或者token已经过期了 需要消除localstorage中的token
      if (res.code === -1) {
        clearHandler()
      }
    }
    return response
  },
  err => {
    if (!err.response) {
      this.$message.error('服务器出现问题，请稍后重试！')
      // 跳转到登录界面
      router.push('login')
      return
    }
    // 获取状态码
    const status = err.response.status
    switch (
      status // 其他情况补充处理
    ) {
      case 500:
      case 400:
        this.$message.error('服务器出现问题，请稍后重试！')
        router.push({
          name: 'login'
        })
        break
      case 401:
        this.$message.error('访问资源未授权，请登陆后重试！')
        router.push({
          name: 'login'
        })
        break
      case 403:
        this.$message.error('请求资源暂时不可用，请登陆后重试！')
        router.push({
          name: 'login'
        })
        break
      case 404:
        this.$message.error('请求资源暂不存在，请稍后重试！')
        router.push({
          name: 'login'
        })
        break
    }
    return Promise.reject(error)
  }
)
// 消除localstorage和vuex中的token
function clearHandler() {
  localStorage.removeItem('token')
  // 跳转首页
  router.push({
    path: '/home',
    query: {
      redirect: router.currentRoute.path
    }
  })
}
export default axios

main.js 中引入拦截器文件

import axios from '../utils/interceptor'
Vue.prototype.$axios = axios

Element 依赖:

npm install element-ui --save

main.js 中添加：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Sass 依赖:

npm install node-sass sass-loader --save-dev

使用 sass 的地方添加 lang=scss

<style lang="scss" >
ps: 依赖安装失败可能是版本不一致，或者太高所导致

Less 依赖:

npm install less less-loader --save

使用 less 的地方添加 lang=less

<style lang="less" >

小技巧

解决 vue 不能自动打开浏览器的问题：

// vue-cil2
1）打开config ==> index.js
2）module.exports配置中找到autoOpenBrowser，默认设置的是false
3) 改为true重启一下，就能自动打开浏览器了

// vue-cil3
1）打开vue.config.js // 没有就在根目录新建一个
2）module.exports配置中抒写
devServer: {
    host: getNetworkIp(),// ip地址
    port: 8080,
    open: true,
  }

为了避免端口冲突，也可以修改 port，打开目录同上

port: 8080

解决每次启动需改 IP 地址的问题：

const os = require('os')
//自动获取本机局域网ip地址
function getNetworkIp() {
  let needHost = '' // 打开的host
  try {
    // 获得网络接口列表
    let network = os.networkInterfaces()
    for (let dev in network) {
      let iface = network[dev]
      for (let i = 0; i < iface.length; i++) {
        let alias = iface[i]
        if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
          needHost = alias.address
        }
      }
    }
  } catch (e) {
    needHost = 'localhost'
  }
  return needHost
}