vue脚手架项目创建步骤详解
vue脚手架—>vue.cli
快速的创建一个大型的功能齐全的vue项目模板(初始化项目)
土味解释:快速的创建一个空的vue项目
安装(全局安装)
- 全局安装
>npmi@vue/cli-g
- 创建vue脚手架项目
>vuecreate项目名
配置选项
VueCLIv4.5.11 ?Pleasepickapreset:(Usearrowkeys) >Default([Vue2]babel,eslint) Default(Vue3Preview)([Vue3]babel,eslint) Manuallyselectfeatures
- 按上下选择,回车确认,这里选择第三项手动
选择功能
VueCLIv4.5.11 ?Pleasepickapreset:Manuallyselectfeatures ?Checkthefeaturesneededforyourproject:(Presstoselect,totoggleall,toinvertselection) >(*)ChooseVueversion (*)Babel ()TypeScript ()ProgressiveWebApp(PWA)Support ()Router ()Vuex ()CSSPre-processors (*)Linter/Formatter ()UnitTesting ()E2ETesting
- 上下移动光标,空格选择,回车确认,这里选择1256选项
选择版本
?Checkthefeaturesneededforyourproject:ChooseVueversion,Babel,Router,Vuex ?ChooseaversionofVue.jsthatyouwanttostarttheprojectwith(Usearrowkeys) >2.x 3.x(Preview)
- 这里选择2.x
是否使用历史模式
?Usehistorymodeforrouter?(Requiresproperserversetupforindexfallbackinproduction)(Y/n)
- 这里输入n回车
Babel,ESLint等的配置位置
?WheredoyoupreferplacingconfigforBabel,ESLint,etc.?(Usearrowkeys) >Indedicatedconfigfiles Inpackage.json
- 这里选择选择第一项专用配置文件存放
是否存为预置
?Savethisasapresetforfutureprojects?(y/N)
- 这里选择n
创建成功
VueCLIv4.5.11
CreatingprojectinD:\MyStudy\myvue2.
⚙️InstallingCLIplugins.Thismighttakeawhile...
>core-js@3.9.1postinstallD:\MyStudy\myvue2\node_modules\core-js
>node-e"try{require('./postinstall')}catch(e){}"
>ejs@2.7.4postinstallD:\MyStudy\myvue2\node_modules\ejs
>node./postinstall.js
added1208packagesfrom928contributorsin21.836s
61packagesarelookingforfunding
run`npmfund`fordetails