vue-cli创建项目及项目结构解析

下面是关于“vue-cli创建项目及项目结构解析”的详细攻略：

1. vue-cli是什么

Vue-cli是Vue.js官方提供的一款构建工具，通过命令行式的交互，可以帮助我们快速搭建一个Vue.js项目的文件结构和工程化基础。

Vue-cli提供了默认的模板，也支持自定义模板。同时，也预设了以下这些特性：

• 支持ES6语法，也可使用TypeScript等其他语言。
• 支持预编译器，如Sass、Less等。
• 本地服务器和热加载等开发工具。
• 对生产环境进行自动优化等。

2. 安装Vue-cli

在使用Vue-cli之前，需要先安装Node.js。安装好之后，需要将npm源指向国内淘宝镜像，以加速npm包的下载。在命令行中输入以下命令即可：

npm install -g cnpm --registry=https://registry.npm.taobao.org

接下来，使用cnpm来安装Vue-cli：

cnpm install --global vue-cli

3. 创建Vue项目

在命令行中输入以下命令，选择需要的模板（推荐选择webpack模板）：

vue init webpack project-name

其中，project-name表示你想要创建的项目名称。

在创建过程中，可以选择对项目进行一些配置，如安装Vue-router、Vuex等插件。

4. 项目结构解析

创建完成后，使用编辑器打开项目，你会看到一个包含以下文件夹和文件的基本文件结构：

project-name/
├── build/                      // webpack相关配置文件目录
│   ├── build.js                // webpack打包生产环境脚本
│   ├── dev-server.js           // webpack服务器启动脚本
│   ├── webpack.base.conf.js    // webpack基本配置文件
│   ├── webpack.dev.conf.js     // webpack开发环境配置文件
│   └── webpack.prod.conf.js    // webpack生产环境配置文件
├── config/
│   ├── dev.env.js              // 开发环境变量配置文件
│   ├── index.js                // 配置主入口文件
│   ├── prod.env.js             // 生产环境变量配置文件
│   └── test.env.js             // 测试用环境变量配置文件
├── node_modules/               // npm依赖模块目录
├── src/                        // Vue项目代码所在目录
│   ├── assets/                 // 静态资源文件目录
│   ├── components/             // 组件文件目录
│   ├── router/                 // 路由配置文件目录
│   ├── store/                  // Vuex配置文件目录
│   ├── App.vue                 // 接收路由渲染的入口VUE组件
│   └── main.js                 // Vue项目主入口文件
├── static/                     // 静态资源目录
├── test/
├── .babelrc                    // babel配置文件
├── .editorconfig               // 代码编码风格配置文件
├── .eslintignore               // eslint忽略规则配置文件
├── .eslintrc.js                // eslint规则配置文件
├── .gitignore                  // git忽略提交文件
├── index.html                  // 项目html模板
├── package.json                // npm包管理配置文件
└── README.md                   // 项目介绍文件

其中，较为重要的文件夹或文件包括：

• src目录：Vue项目代码所在目录。
• components目录：组件文件目录。
• router目录：路由配置文件目录。
• store目录：Vuex配置文件目录。
• main.js：Vue项目主入口文件。

这些文件及目录是Vue-cli为我们预设的基础结构，其中，components目录下面的.vue组件文件为我们实现前端业务逻辑的基础。

例如，我们可以创建一个HelloWorld.vue的组件来展示一个“Hello World”的标语。

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>

在main.js中，我们可以引入该组件，并将其渲染到页面中。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

这只是vue-cli创建项目及项目结构解析的一个基本攻略，实际上我们可以通过vue-cli搭建更加完整复杂的项目结构，同时也可以根据具体的需要进行自定义的配置。