使用vue-cli（vue脚手架）快速搭建项目的方法

使用vue-cli（vue脚手架）快速搭建项目可以大大地提高开发的效率，本文将使用详细的步骤和示例来讲解如何使用vue-cli快速搭建项目。

1. 安装vue-cli

首先，需要全局安装vue-cli，可以使用npm来安装：

npm install -g vue-cli

2. 创建项目

使用vue-cli创建项目，可以使用以下命令：

vue create [project-name]

这里的[project-name]是你想要创建的项目名称，例如：

vue create my-project

执行此命令后，vue-cli会自动下载所需的依赖和配置，并生成新的项目结构。

3. 选择项目模板

在创建项目时，vue-cli提供了多个项目模板，包括官方提供的默认模板和其他第三方模板。

? Please pick a preset: 
  default (babel, eslint) 
  Manually select features

选择Manually select features，可以手动选择需要的功能，例如：

? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

选择需要的功能后，vue-cli会自动下载对应的插件和配置。

4. 运行项目

在完成上述步骤后，就可以运行项目了。使用以下命令进入项目目录：

cd my-project

然后使用以下命令启动项目：

npm run serve

在浏览器中访问http://localhost:8080，就可以看到项目的默认页面了。

示例一：使用Vue Router

使用Vue Router可以帮助我们创建SPA应用程序。首先，按照上述步骤创建一个新项目，然后选择安装Vue Router。

选择Router，然后继续选择Use history mode for router?，此处推荐选择“是”，因为这样可以更好地利用浏览器历史记录管理页面的状态。

Vue CLI选项询问结束后，我们可以使用以下命令来创建新的页面：

vue generate page about

这将创建一个新的Vue单文件组件（about.vue）并将其放入src/pages目录中。

接下来，我们需要在router/index.js中添加关于页面的路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/pages/home.vue'
import About from '@/pages/about.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

现在，在浏览器中访问http://localhost:8080/about，就可以看到关于页面了。

示例二：使用CSS预处理器

Vue CLI内置了对CSS预处理器的支持，包括Sass、Less和Stylus，我们可以根据需要选择。

首先，按照上述步骤创建一个新项目，然后选择安装CSS预处理器。选择CSS Pre-processors，然后继续选择需要的预处理器（Sass、Less或Stylus）。

完成上述步骤后，我们可以在src/assets目录中创建新的Sass、Less或Stylus文件并使用它们。

例如，在src/assets目录中，我们可以创建一个名为styles.scss的文件，其中包含以下代码：

$primary-color: #ff5722;

h1 {
  color: $primary-color;
}

然后，我们可以将其导入到src/main.js中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/styles.scss'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

现在，在App.vue中使用<h1>标签，就可以看到应用程序使用了我们自定义的CSS样式了。