十七、vue进阶之单文件组件介绍（一个文件只写一个组件）和脚手架安装及项目创建！

本文主要是介绍十七、vue进阶之单文件组件介绍（一个文件只写一个组件）和脚手架安装及项目创建！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

单文件组件的后缀为.vue

（1）单文件组件的结构：

（2）脚手架安装

下载脚手架（Vue CLI）-->脚手架会配置webpack-->webpack对单文件组件进行预处理（翻译vue文件到html文件）

可以使用下列任一命令在C盘下安装这个新的包：

npm install -g @vue/cli（常用）
或
yarn global add @vue/cli

可以用这个命令来检查其版本是否正确:

vue --version

（3）脚手架项目的创建

（3.1）在文件夹F:\H5DaiMa\VS Code\Day2 CLI 下创建脚手架项目myapp

第一步：创建myapp

第二步：手动自定义选择

第三步：点击空格，选择需要的插件

第四步：创建vue2的项目

第五步：路由选择，y，回车

第六步：选择css预处理器

第七步：选择标准配置，回车

第八步：选择ESLint的功能，回车

第九步：选择这些配置文件是单独存放，还是直接存放在package.json文件里。选择单独存放，回车

第十步：这一步是问你需不需要把这些配置保存下来，（如果选择保存的话，下次在使用vue create + 项目名称，创建项目时就会按照这次已经选择的这些配置直接创建项目。）

回车之后项目自动创建

（3.2）在Visual Studio Code中打开创建的项目

第一步：在终端打开（假设创建的脚手架项目名为mytest）

第二步：在终端执行npm run serve启动项目mytest，回车

第三步：打开8080端口号，如果显示下面这个页面，则项目从创建到启动成功了

 

这篇关于十七、vue进阶之单文件组件介绍（一个文件只写一个组件）和脚手架安装及项目创建！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---