使用脚手架工具创建Vue项目流程
-
安装脚手架工具
npm i -g @vue/cli
-
安装成功后可以使用下面命令检测是否安装成功
vue -V
-
使用cd命令切换到要创建项目的文件夹里
-
使用命令创建Vue项目
vue create [项目名]
-
选择手动安装
-
选择以下设置,空格键代表选中
Babel:使es6的高级语法装换成浏览器兼容的语法
CSS Pre-processors:css预处理器
Linter / Formatter:代码格式化 -
选择vue版本,我选择的是vue2,直接下一步
-
是否history路由模式,选择n
-
选择css预处理器,这里我选的是less
选择ESLint代码格式化方案,可以根据自己的喜好选择,我选择的是第一个
-
选择什么时候检查错误,我选第一个
Lint on save:保存的时候检测错误
Lint and fix on commin:提交的时候检测错误 -
选择工具的配置文件存放到哪里,我选择第一个(方便维护)
In dedicated config files:放置到各自的配置文件中
In package.json:放置到package.json文件中 -
是否保存一个项目模板,保存后下次选择这个模板直接创建项目,不用再手动安装选择是的话下面会有一个让你填写模板名的命令行,写个方便记住的名字就行
-
至此,项目创建完毕
-
最后
cd vue_blog
切换到项目中,使用npm run serve
启动项目
-
浏览器地址栏输入
http://localhost:8080/
,查看运行结果