cli是vue提供的一个快速(自动化) 构建项目的一个脚手架
命令行安装
打开cmd输入
npm install -g @vue/cli
查看版本
vue --version
开始创建cli
vue create cli
//这个cli是自己定义的文件名
创建完之后回给你三个选项
第一个和第二个是默认选项 ;
babel:优雅降级 es6 —> es5 就是把es6的语法转换为es5的语法;
eslint:js语法检测;
Manually select features: 手动选择配置(选择这个选项)
选择手动配置后就会出现以下(按空格选择)
Choose Vue version 选择vue版本 (选择)
Babel 语法转换器把ES6转换成ES5 (选择)
TypeScript 是JavaScript 的一个超集,扩展了 JavaScript 的语法,使用TypeScript 书写源码
Progressive Web App (PWA) Support 支持渐进式网页应用程序
Router 路由管理器 (选择)
Vuex 状态管理库 (选择)
CSS Pre-processors css预处理器如 scss less(选择)
Linter / Formatter 代码风格,格式校验(选择)
Unit Testing 单元测试
E2E Testing 端到端测试
选择完之后是这样的
就可以回车进行下一步了
这里是选择版本的 选择2.0
这里是 是否使用路由的历史节点 选择 y
这里是 选择一个css预处理器 这边看你学的是sass还是less sass的话选择第一个和第二个都可以
选择编译模式 (建议不要选择漂亮)
ESLint with error prevention only 仅错误预防
ESLint + Airbnb config Airbnb配置
ESLint + Standard config 标准配置
ESLint + Prettier 漂亮
Lint on save 保存时检查 (选择)
Lint and fix on commit 提交时检查
选择 Babel, PostCSS, ESLint 等自定义配置的存放位置(两个选项都可以)
In dedicated config files 在专用的配置文件中
In package.json 在package.json
将此作为将来项目的预置吗 选择n
依次打印 cd bb(bb就是你刚开始创建的文件名)
npm run serve
出现这个就证明已经创建好了
2. 文件介绍
node_module:项目中的依赖包
public:纯静态资源
src文件下的:assets: 资源文件夹,一般放一些静态资源文件
components:里面一般放公共的组件
router: 当前项目的路由文件
views: 当前项目的其他组件
store:是存放vuex数据的
App.vue: 根组件,项目页面入口文件、vue组件
babel.config.js babel 配置文件
gitignore 用来过滤一些版本控制的文件,比如node_modules文件夹
package.json 项目文件,记载着一些命令和依赖还有简要的项目描述信息
README.md 介绍自己这个项目的,可参照github上star多的项目