Vue-cli安装环境配置

yarn安装

npm install -g yarn

yarn使用

安装全部的包

yarn

安装某个包

yarn add 包名

安装某个开发环境包

yarn add 包名 --dev

全局安装

yarn global add 包名

yarn global bin
通过该命令查询安装位置，然后，我们可以将该地址添加到环境变量

yarn默认安装包的位置不存在环境变量中

C:\Users\[用户名]\AppData\Local\Yarn\bin
把这个地址添加到电脑的环境变量path中，这样使用yarn全局安装的包就拥有全局命令了

使用cli并非必须安装yarn，只是安装后，下载模块的速度更快

vue-cli

安装

npm install -g @vue/cli

或

yarn global add @vue/cli

安装完成后会有vue命令

vue命令的使用

创建项目

vue create 项目名

如果遇到卡着不动的情况 直接｀ctrl+ｃ｀重新安装

安装插件

vue add 插件名

运行项目

npm run serve

或者

yarn serve

目录结构

- 项目
  - public
  - src
    - assets 
    - components 组件都需要写在这里
    - views 路由组件需要存放在这里
    - App.vue 我们对应new Vue 对应的模板文件
    - main.js 入口文件
    - router.js 路由配置文件
  - babel.config.js
  - package.json

main.js中引入了App.vue，并且new了一个Vue，把App.vue组件作为模板替换了页面上的#app的内容

App.vue是最基本的组件，所有的组件都需要包含在App.vue(不是必须直接包含)

components中存储的都是组件文件.vue文件

项目中的.vue

vue-loader一个文件类型，webpack会把vue文件作为一个模块。

在vue中有三个结构

• template html
• script js
• style css

我们可以通过 sc 直接生成结构，需要安装对应的插件Vue VS Code Extension Pack （vetur）

当我们把{}作为模块导出时，template会变成{}中的template选项

如何创建组件

src/components中新建一个.vue文件

输入sc生成模板

在template中写模板

child.vue

在父组件中使用
parent.vue

项目构建

最终项目完成后，我们可以去构建（build）我们的项目 npm run build

问题

1. 接口问题
2. 目录路径问题

接口问题

开发环境接口和生产环境接口不是同一个

// 可以通过设置axios的baseURL来解决这个问题
axios.defaults.baseURL = process.evn.NODE_ENV === 'development' ? '开发环境接口/统一后缀' : '生产环境接口/统一后缀'

// 如果配置了跨域
axios.defaults.baseURL = process.evn.NODE_ENV === 'development' ? 'http://localhost:8080/后缀' : '生产环境接口'

前后端分离，用vue-cli开发一定会存在跨域问题

// 配置vue.config.js下的devServer.proxy
module.exports = {
  devServer: {
    proxy: '需要代理的地址', // 开发环境的接口地址url
  }
}

目录路径问题

目录路径是最终build后的项目引入路径，默认是"/js/xxx.js" "/css/xxx.csss"

1. 部署的内容直接放在服务器根目录

不需要进行任何修改

2. 部署的内容放在某个文件夹下的如：demo

module.exports = {
  publicPath: '/demo' // /demo/js/xxx.js
}

3. 一劳永逸的方法

module.exports = {
  publicPath: './'
}

4. 如果配置后不想改变开发环境

module.exports = {
  publicPath: process.env.NODE_ENV === 'development' ? '/' : './'
}

打包完成后

打包完成后就可以把项目给后台进行部署，部署到同一域下 （如果后台已经进行了CORS跨域资源共享，我们只需要部署到任意web服务器下即可）

终极配置

axios.js

axios.default.baseURL = process.env.NODE_ENV === 'development' ? '测试接口' : '生产环境接口'
// 如果设置了代理跨域
axios.default.baseURL = process.env.NODE_ENV === 'development' ? '对应的统一后缀' : '生产环境接口'

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
  devServer: {
    proxy: "测试环境接口url"
  }
}

目的： 为了在开发环境和生产环境中，都能一步到位

1. api接口根目录下的www里
   localhost:3000
2. api接口根目录下的www/demo
   localhost:3000/demo
3. apache对应的服务器目录里
   localhost
4. apache对应的服务器目录的demo里
   localhost/demo