Vue-Cli 脚手架
- 脚手架：帮助我们把webpack等相关配置都处理好，开箱即用,脚手架好比工具,我们只需要基于脚手架快速构建一个项目即可
- 参考网址: https://cli.vuejs.org/zh/
- 安装:下载Vue-Cli脚手架,一般安装在全局(-g)
npm install -g @vue/cli
# 或者
yarn global add @vue/cli- 安装完成后全局环境下会生成一个 vue的可执行命令， vue --version 或者 vue -V查看版本号
一.脚手架的创建,配置,使用
一.创建项目
vue create 文件夹名(项目名)
二.配置
- 第一项为曾经的配置好的选项，保留下来的,如果第一次创建没有保存,只有default 和 Manually选项
- 第二项default为默认设置，最基本的配置,包含了babel和eslint,推荐手动配置
- 第三项为手动选择，可以手动选择自己需要的高级配置（因为前两项回车就可以完成配置，所以下面只展示第三项手动选择）
三.手动配置
键盘,上下箭头选择,空格选中和不选中,选好回车键继续,
Bable(必选) 表示可以使用es6,es7语法等,
TypeScript 暂时不选,有需要可选
PWA 不选,chrome的一个离线程序
Router (必选) 路由
Vuex (必选)
CSS pre-processors (必选) css处理器 sass less 不用就不选
Linter(必选) 代码格式化,规划
Unit 和 E2E 不选 测试用的
选好回车继续
四.选择css预处理语言
可以默认选第一个 sass/scss
五.选择代码风格和格式校验
一般选择第三个,标准代码格式,回车继续
六.代码检查
第一个选项,代码一保存就检查,
第二个选项,代码提交的时候修复,建议都选
七.配置文件
第一个选项:保存到一个默认文件
第二个选项:保存到package.json文件 这里选择第一个
八.是否保存配置
需要保存 就给yes 然后给一个名字
不需要保存就no
然后回车,就会自动安装配置
九.创建完成启动项目
先cd 进入项目目录,然后npm run serve 启动,会生成如下图
然后浏览器打开 localhost:8080 这个地址,就能看到一个hello world 的页面
十.在本地查看,如下图
到这里,Vue-Cli脚手架,搭建项目就完成了
