vue脚手架使用教程

Vue脚手架（Vue CLI）是一个官方提供的快速构建Vue.js项目的工具。它提供了一套完整的工具链，帮助开发者快速搭建和配置Vue项目。以下是使用Vue脚手架的基本步骤：

### 1. 安装Vue CLI
首先，确保你的电脑上已经安装了Node.js和npm。然后在命令行中运行以下命令来全局安装Vue CLI：

npm install -g @vue/cli

### 2. 创建新项目
安装完成后，可以使用`vue create`命令来创建一个新的Vue项目。运行以下命令并按照提示选择配置：

vue create my-project

在提示中选择你需要的配置选项，如Babel、Router、Vuex等。

### 3. 运行项目
进入项目目录并启动开发服务器：

cd my-project
npm run serve

### 4. 项目结构
Vue CLI生成的项目结构通常如下：

my-project/
  node_modules/
  public/
    index.html
    favicon.ico
  src/
    assets/
    components/
    App.vue
    main.js
  package.json
  README.md

### 5. 常用命令
- `npm run serve`：启动开发服务器
- `npm run build`：构建生产版本
- `npm run lint`：运行ESLint进行代码检查

### 6. 配置
Vue CLI使用`vue.config.js`文件进行配置。你可以在项目根目录下创建这个文件并添加自定义配置。例如：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  },
  css: {
    loaderOptions: {
      sass: {
        // 添加你的Sass配置
      }
    }
  }
};

### 7. 插件
Vue CLI支持插件系统，可以通过`vue add`命令来添加插件。例如，添加Vue Router：

vue add router

### 8. 构建和部署
构建生产版本并部署到服务器：

npm run build

构建完成后，将`dist`目录中的文件部署到你的服务器上。