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选项
<template>
<div>组件模板</div>
</template>
<script>
export default {
}
</script>
<style>
div {
width: 100px;
}
</style>
如何创建组件
src/components中新建一个.vue文件
输入sc生成模板
在template中写模板
child.vue
<template>
<div>子组件</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
在父组件中使用
parent.vue
<template>
<div>
父组件
<child></child>
</div>
</template>
<script>
// 引入的child就是一个组件对象
import child from './child' // .vue可以省略
export default {
components: {
// 局部注册组件
child
}
}
</script>
项目构建
最终项目完成后，我们可以去构建（build）我们的项目 npm run build
问题
- 接口问题
- 目录路径问题
接口问题
开发环境接口和生产环境接口不是同一个
// 可以通过设置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"
}
}
目的： 为了在开发环境和生产环境中，都能一步到位
- api接口根目录下的www里
localhost:3000 - api接口根目录下的www/demo
localhost:3000/demo - apache对应的服务器目录里
localhost - apache对应的服务器目录的demo里
localhost/demo
