Vue-Cli详解

Vue-Cli详解

---

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板 ;

预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要的功能:

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

一、配置Vue-Cli环境

mac 终端命令
配置环境一般需要比较高的权限，最后进入管理员模式，执行命令su 并输入密码
1.首先如果npm的版本不是最新版本，在安装东西时会报错，首先更新npm

npm install
1

2.如果电脑之前有vue-cli的残留，则安装时也会报错，首先卸载曾经安装的vue以及缓存

npm uninstall -g vue-cli
1

3.安装vue-cli

npm install -g @vue/cli-init
1

注意：不需要用vue list 判断vue-cli 是否安装成功，在新版本的vue中已经取消了这个命令

二、第一个vue-cli应用程序

1.我们新建一个文件夹
2.在这个目录下，创建一个基于webpack模版的vue应用程序

# 这里的 myvue 是项目名称，可以随意起名字
vue init webpack myvue
1
2

• Project name：项目名称
• Project description：项目描述
• Author：项目作者
• Install vue-router：是否安装 vue-router
• Use ESLint to lint your code：是否使用 ESLint 做代码检查
• Set up unit tests：单元测试相关
• Setup e2e tests with Nightwatch：单元测试相关
• Should we run npm install for you after the project has been created：创建完成后直接初始化

3.初始化vue-cli项目 并运行

cd myvue
npm install
npm run dev
1
2
3

在IDEA中也可执行以下指令，先进入管理员模式


项目启动成功后，即可访问

目前为止，vue的脚手架就搭建好了，后面可以做项目了。

如果对您有帮助，免费的赞点一个～～～感谢🙏