创建Vue项目详解

一、安装Vue脚手架

Vue提供了一个方便的脚手架工具，可以帮助我们快速创建一个Vue项目。首先，我们需要在命令行工具中安装Vue脚手架：

npm install -g vue-cli

安装完成后，我们可以在命令行工具中通过以下命令来创建一个新的Vue项目：

vue init webpack my-project

其中“my-project”为项目名称，可以根据我们自己的需要进行修改。运行上述命令后，脚手架会询问我们一系列问题，以便生成合适的项目结构：

1. Project name：项目名称

2. Project description：项目描述

3. Author：作者名字

4. Vue build：选择需要的 Vue 构建版本

5. Install vue-router：是否安装 vue-router

6. Use ESLint to lint your code：是否使用ESLint来检查代码结构

7. Set up uni test：是否安装并集成 unit test 测试工具

8. Set up e2e tests with Nightwatch：是否安装并集成 e2e 测试工具

9. Should we run `npm install` for you after the project has been created?：是否在项目创建完成后自动运行npm install安装依赖

二、目录结构

在使用Vue脚手架创建项目后，我们可以看到生成的目录结构如下：

my-project
|- build/
|  |- build.js
|  |- check-versions.js
|  |- utils.js
|  |- vue-loader.conf.js
|  |- webpack.base.conf.js
|  |- webpack.dev.conf.js
|  |- webpack.prod.conf.js
|  |- webpack.test.conf.js
|- config/
|  |- dev.env.js
|  |- index.js
|  |- prod.env.js
|  |- test.env.js
|- node_modules/
|- src/
|  |- assets/
|  |- components/
|  |- router/
|  |- App.vue
|  |- main.js
|- static/
|- test/
|- .babelrc
|- .editorconfig
|- .eslintignore
|- .eslintrc.js
|- .gitignore
|- .postcssrc.js
|- index.html
|- package.json
|- README.md

根目录下的“build”文件夹包含了Webpack打包配置，而“config”文件夹包含了项目的配置信息。我们通常不需要修改“build”和“config”文件夹中的内容。src文件夹中包含了整个项目的开发文件，其中assets文件夹存放静态资源，components文件夹存放组件，router文件夹存放路由配置，App.vue是整个应用的入口组件，而main.js则是项目的入口文件。

三、启动项目

在创建了Vue项目后，我们可以通过以下命令来启动项目：

npm run dev

运行上述命令后，我们可以在浏览器中访问http://localhost:8080来查看应用。此时，我们还看不到太多内容，因为我们还没有创建任何组件或路由。

四、创建组件

在Vue中，组件是应用中最基本的单元，我们需要先创建一些组件来构建应用。在src/components文件夹中，我们可以创建一个名为“HelloWorld”的组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style scoped>
.hello {
  font-size: 2em;
  text-align: center;
  color: #42b983;
}
</style>

在上述代码中，我们定义了一个名为“HelloWorld”的Vue组件。组件的模板内容包含了一个div元素和一个h1标签，使用了双大括号语法来绑定msg数据。在脚本部分，我们定义了组件的数据对象，并将其导出为一个可以被导入的模块。在样式部分，我们给组件定义了一些基本样式，其中scoped属性表示样式仅对当前组件有效。

五、创建路由

在Vue中，路由是管理页面导航的机制。我们通常使用vue-router来配置并管理路由。在src/router文件夹中，我们可以创建一个名为“index.js”的文件来配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在上述代码中，我们首先从“vue-router”包中导入Vue和Router模块，并将Vue对象安装到Router中。接下来，我们通过Router对象的routes属性来定义我们的路由规则，其中每个路由规则均由path、name和component三个参数组成。其中path表示路由地址，name表示路由的名称，component表示路由实际导航到的组件。

六、应用组件和路由

最后，我们需要将组件和路由应用到我们的应用中。在src/App.vue文件中，我们可以使用router-view元素来渲染当前路由的组件：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在以上代码中，我们定义了App组件的模板内容，其中仅包含了一个id为“app”的div元素和一个router-view元素。最后，我们需要在src/main.js文件中将组件和路由应用到根Vue实例中：

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

Vue.config.productionTip = false

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

在上述代码中，我们首先导入Vue、App和router三个模块，然后创建了一个新的Vue实例，并将其挂载到id为“app”的元素上。同时，我们使用router参数将路由对象注入到Vue实例中，使用components参数将App组件注入到Vue实例中，并使用template参数指定了App组件的模板内容。

总结

到这里，我们已经基本完成了一个Vue应用的创建，包括了安装Vue脚手架、目录结构、启动项目、创建组件和路由以及应用组件和路由。使用Vue脚手架可以大大简化项目的开发和管理，同时Vue提供了很多有用的工具和功能，可以让我们更加方便地构建复杂的Web应用。