使用python编写web项目，第六节，创建前端项目以及了解vue框架的目录结构

上一级说了vue的前置环境的搭建以及vue的安装，安装完之后，这一节就开始创建vue框架的目录了，并且了解vue的目录结构

首先需要打开cmd或者powershell，在终端中输入' vue create project_name '（project_name表示项目名字），然后回车即可开始项目的创建，创建过程中需要选择一些系统性的配置信息，如果有觉得小编的说明不够详细的，可以自己去vue的官网上查看，以下是详细过程

第一步：

这一步是选择预设，上面两个选项是默认使用vue3或者vue2的配置，第三个是手动选择预设，这里小编选的是第三个（蓝色箭头指向的表示选中，按回车确认就行下一步），这一步如果选择的是默认配置的，可能就没有小编下面的步骤了，这个小编没有试过

第二步：

这一步是选择项目所需要的功能，到这一步时，Babel和Linter/Formatter两个选项是被默认选中的，Babel选项可以不管，Linter这个是选中是否使用vue的标准格式化，这里作为新手建议取消，如果选中，那么在文件中，所有代码的格式都必须按照vue的标准来写，这样可能就不方便，一般只要会语法有可以了，所以建议取消这个选项，然后，‘...web app...’和‘router’选项建议选中，web app这个表示应用是否支持网页版的和手机app版的，router表示是否自动创建基本的路由，这个可以作为新手开发的参考，所以推荐选中，其他的根据自己的需要去选择（这一步按空格键可以选择和取消选择）

第三步：  

这一步是选择vue的大版本，一般都选择3的版本

第四步：

这一步是选择是否使用历史版本的路由，这里小编选择否，项目的路由可以自己手动创建，历史版本的路由也不一定符合自己的需求

第五步：

这一步是选择将一些配置放在哪里，第一个选项表示放在专门的配置文件中，第二个表示放在package.json文件中，这里小编选择的是第一个

 第六步：

这一步是选择是否保存当前选项作为以后项目的预设，这个根据自己的具体需求来，这里小编选择的是否，这一步选择完之后，系统就开始自动创建项目目录了

第七步： 

创建完成之后就可以开始下一步操作了，这里标记出来的蓝色字体是操作提示，第一步表示可以切换到项目目录中去，第二步表示启动项目，这里的web_cli是小编的项目名字，另外提醒一下，启动项目必须切换到项目目录中

最后：

项目启动成功之后会显示出以下内容，这里可以在浏览器中输入图中标记的网址进行访问，也可以直接按ctrl再点击这个地址也可以进行访问

 效果图：

 如果能看到上面这个页面，就表示项目已经创建并且启动成功

项目创建成功之后，接下来就是了解vue框架的目录了

项目目录
    |--- node_modules
    |--- public
        |--- img
        |--- ... (其他文件或目录，这里不做介绍)
    |--- src
        |--- assets
        |--- components
        |--- router
        |--- views
        |--- App.vue
        |--- main.js
        |--- registerServiceWorker.js
    |--- .browserslistrc
    |--- .gitignore
    |--- babel.config.js
    |--- jsconfig.json
    |--- package.json
    |--- README.md
    |--- vue.config.js
    |--- yarn.lock

•  node_modules：项目(前端部分)的依赖环境，项目想要的所有安装包都放在这里
• public：公共资源目录，存放项目的所有公共资源
• img：图片目录，存放所有图片
• src：源码目录，为'source'源的缩写，项目的主要代码在这里编写，相当于主目录
• assets：这个目录中只有一个初始的log文件，小编推测应该是存放项目log的，但是log本身也属于图片，一般都存放在静态资源目录中，所以这里可以不管它
• components：组件目录
• router：路由目录，存放用于发送网络请求的地址
• views：视图目录，在这里编写应用的每个页面
• App.vue：启动文件，项目前端部分的启动从这里开始
• main.js：顾名思义，逻辑部分的主文件
• registerServiceWorker.js：关于这个文件，小编在官网一时也没找到相关的介绍，所以这里就不做说明
• .browserslistrc：浏览器的兼容性文件
• .gitignore：这个是用于在向仓库提交版本文件时，设置可忽略文件的，了解过git等版本控制工具的朋友应该知道这个文件
• babel.config.js：目录中，从这个文件开始，一直到下面的yarn.lock，README.md除外，都是各种配置文件，这些配置文件一般很少会用到，所以这里就不细说了
• README.md：项目的说明文件

以上就是vue项目的创建，以及对项目目录的基本了解，有兴趣深入学习的，可以自行去vue的官网学习