vue-cli图形化管理界面创建单文件组件项目

为了保证能够使用vue.js单文件组件，需要安装以下环境。

安装 `npm`
`npm` 全称为 `Node Package Manager`，是一个基于`Node.js`的包管理器，也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。
npm -v

由于网络原因 安装 `cnpm`
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 `vue-cli`
cnpm install -g @vue/cli

安装 `webpack`
`webpack` 是  `JavaScript` 打包器(module bundler)
cnpm install -g webpack

创建项目步骤

1.进入要创建项目的目录

windows的cmd下盘符：（例如D:）进入相应的盘，然后cd 路径（例如cd \code\vuecode）进入文件夹

2.启动vue-cli图形化管理界面

vue ui

 3.创建项目

点击创建->在此创建项目->输入项目名->选择npm包管理器->下一步->默认设置->创建项目。

经过一段时间的等待之后，项目就创建好了，这时候我们可以关闭命令行，关闭图形化管理界面，进入目录，找到项目文件vuestrat，进行编辑。我把项目拖拽到 Hbuilderx中，完成拖拽创建工作

4.目录结构

public-项目做好后用于部署的生产环境的文件

src-开发目录

components-正好项目的组件目录

App.vue-作为项目的入口文件完成了项目组件的引入工作。

5.运行项目。

运行-运行到终端-2npm run serve

运行成功后，会有端口地址，复制地址到浏览器打开，就可以看到运行结果。

运行成功后，会有端口地址，复制地址到浏览器打开，就可以看到运行结果。