vue-cli

常用命令

安装 vue-cli

# 全局安装
npm i @vue/cli -g
# 多种工具安装 vue-cli
cnpm i @vue/cli -g # 使用淘宝安装
# 推荐使用
yarn global add @vue/cli

# 查看版本号，注意是大写的V
vue -V
# 或者下面命令查看版本号
vue --version

# 如果 vue/cli 版本较低，通过下面方法升级
npm update @vue/cli -g
# 或者
yarn global upgrade --latest @vue/cli

# 使用 npm 安装 yarn
npm install yarn -g
# 由于墙的问题使用 yarn 安装依赖也是不成功，通过下面方式修改为国内镜像
yarn config set registry https://registry.npm.taobao.org

创建项目

# 使用 vue-cli 创建项目
vue create eduapp

# 使用 vite 创建项目（推荐）
npm init @vitejs/app
# 或者
cnpm init @vitejs/app
# 或者
yarn create @vitejs/app 项目名称
# 上面 yarn 创建项目的命令已经弃用，更换为下面的方法
yarn create vite manager-fe
# 创建项目后执行下面命令安装必要的依赖
yarn
# 是的，只要 yarn 就可以安装依赖了，没有任何参数
# 运行项目
yarn dev


# 安装项目生产依赖，参数 -S 表示安装为生产依赖
yarn add vue-router@next vuex@next element-plus axios -S
# 使用下面命令卸载
yarn remove vue-router@next vuex@next element-plus axios -S
# 如果卸载失败，可到项目根目录下手动删除 yarn.lock 和目录 node_modules
# 将配置文件 package.json 中属性 devDependencies 中的依赖项剪切黏贴到 dependencies下
# 即将开发依赖转移为生产依赖，然后执行 yarn 安装依赖

# 安装项目开发依赖，参数 -D 表示安装为开发依赖
yarn add sass -D
# 之前使用 webpack 时需要安装 sass-loader，而 vite 本身集成了所以不用在安装 sass-loader 插件了
# 使用下面命令卸载 sass
yarn remove sass -D

# 留意配置文件 package.json 属性 devDependencies 下是否需要
# "@vue/compiler-sfc":"^3.0.5"


# 为 visual studio code 安装插件：Vetur,ESLint