Vue脚手架可以快速生成Vue项目基础的架构。
A.安装3.x版本的Vue脚手架:
npm install -g @vue/cli
B.基于3.x版本的脚手架创建Vue项目:
1).使用命令创建Vue项目
命令:vue create my-project
选择Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选。
是否选用历史模式的路由:n
ESLint选择:ESLint + Standard config
何时进行ESLint语法校验:Lint on save
babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置)
是否保存为模板:n
使用哪个工具安装包:npm
2).基于ui界面创建Vue项目
命令:vue ui
在自动打开的创建项目网页中配置项目信息。
3).基于2.x的旧模板,创建Vue项目
npm install -g @vue/cli-init
vue init webpack my-project
C.分析Vue脚手架生成的项目结构
node_modules:依赖包目录
public:静态资源目录
src:源码目录
src/assets:资源目录
src/components:组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:
说几个重要的点。
预设要选择 手动配置
功能 要选 第一个babel router vuex Linter/Formatter 和最后一项 使用配置文件。
配置 要选 第三个,EsLint+Standard config 标准版
原文:https://www.cnblogs.com/coder-lzh/p/11892847.html