vue项目的创建的步骤(图文教程)

下面是详细讲解Vue项目的创建的步骤：

1. 安装Vue CLI

Vue CLI是一个构建Vue项目的官方脚手架工具，使用它可以快速生成一个基于Vue的项目结构，我们需要事先安装它。

可以使用以下命令安装Vue CLI：

npm install -g @vue/cli

其中 -g 参数表示全局安装，如果已经安装过Vue CLI，则可以直接跳过此步。

2. 创建Vue项目

使用以下命令可以创建一个基于Vue的项目：

vue create my-project

其中 my-project 是项目名称，可以自定义。在执行该命令后，Vue CLI会为我们提供一些选项，包括选择一个预设（预配置的一些依赖和工具），或手动选择需要的特性。

选择配置之后，Vue CLI 会下载并安装所需的依赖和插件，这个过程可能需要一些时间，取决于您的网络连接速度。

3. 运行Vue项目

项目创建完成后，使用以下命令启动一个本地开发环境：

cd my-project
npm run serve

其中 my-project 是项目名称，需要进入项目目录后执行。

默认情况下，Vue CLI 工具会在本地运行一个开发服务器，监听在 http://localhost:8080 上，您可以在浏览器中打开该链接查看您的应用。

4. 扩展Vue项目

Vue CLI 工具提供了各种预设配置，但您还可以选择安装其他依赖和插件来扩展您的项目。

例如，您可以使用以下命令安装 Vue Router（Vue的官方路由工具）：

npm install vue-router

安装后，在Vue项目中引入和配置Vue Router。

示例1

这是一个使用了Pug和SCSS的Vue 2.x项目的创建过程：

使用以下命令安装Vue CLI：

npm install -g @vue/cli

创建Vue项目并选择手动配置：

vue create my-project

根据提示选择手动配置，依次选择：

Babel
Router
ESLint + Standard config
Prettier
Sass/SCSS (with node-sass)

然后完成配置。

让项目支持Pug：

安装 pug 和 pug-plain-loader：

npm install pug pug-plain-loader --save-dev

修改 vue.config.js 文件，在 module.exports 内添加下列代码：

javascript module.exports = { chainWebpack: config => { const pugRule = config.module.rule("pug"); pugRule.uses.clear(); pugRule .use("raw-loader") .loader("raw-loader") .end() .use("pug-plain-loader") .loader("pug-plain-loader") .end(); } };

在 .vue 文件的 template 属性中写 Pug 语法即可。

让项目支持 SCSS：

在 src 目录下创建 styles 目录，并在其中创建一个 main.scss 文件，然后在 main.js 文件中添加以下代码：

javascript import "./styles/main.scss";

安装 sass-loader 和 node-sass：

npm install sass-loader node-sass --save-dev

启动项目：

npm run serve

然后在浏览器中打开 http://localhost:8080 即可查看页面。

示例2

这是一个使用 Vuetify 的 Vue 3.x 项目的创建过程：

使用以下命令安装Vue CLI：

npm install -g @vue/cli

创建Vue项目并选择手动配置：

vue create my-project

根据提示选择手动配置，依次选择：

Babel
ESLint + Prettier
Router
Vuex
Linter / Formatter
安装 Vuetify 和插件：

npm install vuetify @vue/cli-plugin-vuetify --save

在 vue.config.js 中添加以下代码：

javascript module.exports = { transpileDependencies: ["vuetify"] };

在 main.js 文件中引入 Vuetify：

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify' // 导入 vuetify 插件

createApp(App)
.use(store)
.use(router)
.use(vuetify) // 导入并使用 vuetify 插件
.mount('#app')
```