yarn的安装
- 安装yarn
npm install -g yarn - 查看安装版本
yarn --version - 添加包
yarn add [package] - 添加包到dev下
yarn add [package] --dev - 更新包
yarn upgrade [package] - 安装依赖包
yarn install
创建3.0版本的脚手架
参照vue3.0的官方文档
安装全局的vue脚手架，然后查看版本。如果是3.0以上的，那么就安装成功。可以开始创建脚手架
npm install -g @vue/cli
# OR
yarn global add @vue/cli
$ vue --version
@vue/cli 4.2.3
使用
vue create [项目名称]直接可以创建。default就是默认的配置。Manually select features也可以自己手动选择自己需要的依赖包。如果自己手动选择创建后，可以保存一个自己的专属配置。方便下次创建使用。比如这边以前创建了一个radish的配置。
? Please pick a preset:
radish (node-sass, babel, pwa, router, vuex)
default (babel, eslint)
❯ Manually select features
项目结构
vue.config的描述
在
3.0下，文件夹也整洁了许多。个人总结了大概如下几点。
-
2.0的static移动到了public文件下。 - 启动命令换成了
yarn run serve。 - 可以手动配置测试环境的参数和生产环境的参数。
-
2.0下的build文件夹，移动到了node_modules下的@vue文件夹。
3.0的webpack
配置测试、生产环境下的参数。
在根目录下，创建
.env.development和.env. production。这边的参数好像是要VUE_APP_XXX这样写。比如我配置了请求的URL地址。在axios请求的时候，可以直接使用。
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000 // request timeout
})
配置参数
打包后本地可以打开
在
2.0我们修改build下的publicPath为相对地址，就打包成功后，可以直接在本地打开。3.0后，已经没有build文件夹。需要在根目录创建vue.config.js，加入如下配置。这里可以配置以前所有的配置，比如跨域，比如。。。。参照官方的配置文档
module.exports = {
// 基本路径
publicPath: './',
}
