Vue项目创建完成后，使用WebStorm打开项目，项目目录如下build文件夹，用来存放项目构建脚本 config中存放项目的一些基本配置信息，最常用的就是端口转发 node_modules这个目录存放的是项目的所有依赖，即npminstall命令下载下来的；打开FileProject出现newproject弹出框选择HTML5Boilerpalte选择HTML5样板修改对应的名字和Version，我输入h5_test01，version600点击Create后，将会创建一个h5_test01H5项目WebStorm。
你也可以通过 vue ui 命令以图形化界面创建和管理项目图形化的界面就不需要多介绍了，有中文都能很好地使用使用Vue项目管理器，选择项目地址flaskvue根目录上节运行flask示例的文件夹，创建新项目名称vue根据具体；我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢 Vue 项目启动过程，本文简要介绍在执行 npm run dev 的时候，会在当前目录中寻找 packagejson 文件，包含项目的 名称版本。
在终端输入以下命令检测cnpm是否安装成功 vuecli是vue脚手架工具，方便打包，部署，测试等进入你的项目目录，创建一个基于 webpack 模板的新项目 vue init webpack 项目名 进入项目 安装依赖 此时项目中会多了一个nod；Webstorm支持的更多，IDEA需要自己配置例如less或这sass。
Vue 项目创建时候的一些基础配置小记CLI 即 @vuecli 全局安装的 npm 包用于终端提供 vue 相关的指令，可用来创建工程启动服务等CLI service 即 @vuecliservice 开发环境的依赖，构建于 webpack 和 webpackdev。
webstorm创建vue项目的步骤
一直走下去就可以了安装完成后，就可以看到，新建文件时，会有vue文件的提示3设置vue新建文件模板filesettingeditorfile and code Templates，选择vue File，然后在右边框中编辑默认模板内容。
官方文档 已经安装最新版本的vuecli，我很推荐这个图形化界面，非常方便你也可以通过 vue ui 命令以图形化界面创建和管理项目图形化的界面就不需要多介绍了，有中文都能很好地使用使用Vue项目管理器，选择项目地址flask。
这里说下 vuecli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便启动 vuecli 图形界面 然后。
在设置中选择plugin插件， 选择 Browse repositories， 左上角搜索Vue 在设置中， 将 *vue 添加进入Vuejs Template 中 若提示冲突， 点击移除原来的即可 在设置中搜索JavaScript， 将JS版本选择为ECMAScript 6 在设置中。
然后创建一个新的项目 vue init webpack myproject 一路回车，搞定更多配置项请参考上面给出的vuecli链接这里从网上下载了一个带webpack的vue项目跑之前记得npm install一下04vuecli webpack 从bulid文件夹。
vuecli可以帮我们自动搭建项目，首先npm全局安装 npm install g vuecli 然后创建一个新的项目 vue init webpack myproject 一路回车，搞定更多配置项请参考上面给出的vuecli链接这里从网上下载了一个带webpack。
不能包含大写字母重新选择路径创建此处留个坑vue注册组件时，大写的组件名是支持的，只是使用时需要将大写改小写并加中划线。
webstorm创建vue项目结构出错
1、安装好之后cd项目根目录，运行项目npm run serve1scss或者less，这里我用scss npm install sassloader nodesass save 2vuerouter是必不可少的 cnpm install vuerouter 接着在scr目录下创建路由文件 接着。
2、点击Preferences LanguagesFrameworks Nodejs and npm，勾选coding assistance for Nodejs，点击ok保存。
3、实在不行，就先创个JS的文件，在改名，改成vue文件。
