重零开始搭建vue项目

1.npm install -g vue-cli 

2.vue init webpack my-project

3.cd my-project

4.npm install 

5.npm run dev

项目结构：

├── build/ # webpack配置文件
│ └── ...
├── config/
│ ├── index.js # 主要项目配置
│ └── ...
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 主应用程序组件
│ ├── components/ # ui组件
│ │ └── ...
│ └── assets/ # 模块资源（由webpack处理）
│ └── ...
├── static/ # 纯静态资源（直接复制）
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── index.js # 测试构建条目文件
│ │ └── karma.conf.js # 测试跑步者配置文件
│ └── e2e/ # e2e测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── custom-assertions/ # e2e测试的自定义断言
│ │ ├── runner.js # 测试跑步脚本
│ │ └── nightwatch.conf.js # 测试跑步者配置文件
├── .babelrc # babel 配置
├── .postcssrc.js # postcss 配置
├── .eslintrc.js # eslint 配置
├── .editorconfig # editor 配置
├── index.html # index.html模板
└── package.json # 构建脚本和依赖关系

build/   包含服务器和生产webpack构建的实际配置，一般情况下不需要触摸这些文件，除非你要自定义webpack加载器，在这种情况下，你应该看看build/webpack.base.conf.js

 

config/index.js   显示构建设置的一些最常见配置选项的主配置文件。

 

src/   大部分程序代码所在的位置。如何构建此目录中的所有内容，主要取决于怒；如果你用vuex，你可以查阅vuex应用程序的建议。

 

static/   此目录是你不想使用wenpack进行处理的静态资源的一个逃生窗口。他们将直接复制到生成webpack建立资产的同一个目录中。

 

test/e2e   包含e2e测试相关文件

 

index.html   这是我们的单页应用程序的模版index.html。在开发和构建期间，webpack将生成资产，并将生成的资产URL自动注入到此模版中以呈现最终的HTML

 

pack.json   包含所有构建依赖项和构建命令的NPM软件包元文件

 

构建命令：

npm run dev 启动node.js本地开发服务器

npm run build 建立资源进行生产

npm run e2e  使用Nightwatch进行端到端测试