NPM脚手架创建项目

打开mydemo文件夹，目录结构如图
项目目录下的文件夹和文件的用途如下：
（1）node_modules文件夹：项目依赖的模块。
（2）public文件夹：该目录下的文件不会被Webpack编译压缩处理，引用第三方库的js。
（3）src文件夹：项目的主目录。
（4）.gitignore：配置在git提交项目代码时忽略哪些文件或文件夹。
（5）babel.config.js：Babel使用的配置文件。
（6）package.json：NPM的配置文件，其中设定了脚本和项目依赖的库。
（7）package-lock.json：用于锁定项目实际安装的各个NPM包的具体来源和版本号。
（8）REDAME.md：项目说明文件。

下面分析几个关键的文件代码。src文件夹下的App.vue文件和main.js文件、public文件夹下的index.html文件。1.
现在流行的CSS预处理器有less、sass和stylus等，如果想要在Vue CLI创建的项目中使用这些预处理器，可以在创建项目的时候进行配置。下面以配置scss为例进行讲解，其他预处理的设置方法类似。步骤01使用“vue create sassdemo”命令创建项目时，选择手动配置模块，
步骤02按回车键，进入模块配置界面，然后通过空格键选择要配置的模块，这里选择“CSS Pre-processors”来配置预处理器，
步骤03按回车键，进入选择版本界面，这里选择3.x选项，
步骤04按回车键，进入CSS预处理器选择界面，这里选择Sass/SCSS(with dart-scss)，
步骤05按回车键，进入到代码格式和校验选项界面，这里选择默认的第一项，表示仅用于错误预防，。
步骤06按回车键，进入何时检查代码界面，这里选择默认的第一项，表示保存时检测，
步骤07按回车键，设置如何保存配置信息，第1项表示在专门的配置文件中保存配置信息，第2项表示在package.json文件中保存配置信息，这里选择第1项，
步骤08按回车键，设置是否保存本次设置，如果选择保存本次设置，以后再使用vue create命令创建项目时，会出现保存过的配置供用户选择。这里输入“y”，表示保存本次设置，
步骤09按回车键，为本次配置取个名字，这里输入“myset”，
设置本次设置的名字步骤10按回车键，项目创建完成后，