如何创建Vue项目

一、安装Vue CLI

Vue CLI是官方提供的一个基于Node.js的命令行工具，可以快速地创建Vue.js项目。在进行Vue项目开发前，需要先安装Vue CLI。

安装步骤

1.首先，确保已安装Node.js。在终端窗口中输入node -v，如果返回了Node.js的版本号，则说明已经安装成功。
2.打开命令行，输入以下命令进行Vue CLI的全局安装：

npm install -g @vue/cli

3.安装成功后，可以输入以下命令检测版本号：

vue -V

如果返回了Vue CLI的版本号，则说明安装成功。

二、使用Vue CLI创建Vue项目

创建Vue项目步骤

1.打开命令行，进入到需要创建Vue项目的目录下。
2.输入以下命令，创建项目：

vue create projectname

其中，projectname是项目名称。如果需要自定义配置，可以使用以下命令：

vue create --preset presetName projectName

其中，presetName是预设配置名称，可以根据自己的需要进行选择。

3.跑完以上命令后，可能会有选择配置项页面供选择，根据自己需要进行修改。如果默认即可，则可以直接回车。
4.等待依赖包下载和安装完成，完成后会显示进行下一步命令，此时，Vue.js项目已经成功创建。

三、运行Vue项目

运行步骤

1.打开命令行，进入已创建的Vue项目的目录下。
2.输入以下命令运行项目：

npm run serve

3.等待编译完成，浏览器中会显示项目页面。

四、vue.config.js配置文件

配置文件说明

1.在Vue CLI3以上版本中，新增了vue.config.js配置文件，用于在CLI的内部webpack配置中进行扩展。
2.可以在vue.config.js中进行devServer和webpack的各种配置，比如打包输出目录、静态资源路径、代理等等。

配置项示例

module.exports = {
  // 打包输出目录
  outputDir: 'vue-dist',
  // 静态资源路径
  publicPath: '/static/',
  // 设置代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

五、总结

通过Vue CLI提供的命令行工具可以快速创建Vue项目，并在vue.config.js中进行各种配置，方便开发人员进行项目开发。