怎么使用vue-cli3创建一个项目?

113 阅读2分钟

"```markdown

使用Vue CLI 3创建一个Vue项目

安装Vue CLI 3

首先,确保你已经安装了Node.js和npm。然后,通过npm全局安装Vue CLI 3:

npm install -g @vue/cli

创建一个新项目

安装完Vue CLI 3后,你可以使用以下命令创建一个新项目:

vue create my-project

这里的my-project是你的项目名称,你可以根据需要替换成其他名称。

选择或配置 preset

运行上述命令后,Vue CLI 3会提示你选择一个预设配置或手动选择特性。预设配置会根据你的项目需求自动选择合适的插件和设置。如果你想要更多控制权,可以选择手动选择特性。

# 选择预设配置
vue create my-project --preset

# 手动选择特性
vue create my-project --default

项目结构

创建项目后,你会看到一个包含以下文件和文件夹的新目录:

my-project/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

开发和生产构建

你可以使用以下命令来启动开发服务器:

npm run serve

要构建生产版本的文件,可以使用:

npm run build

添加新的页面或组件

src/views目录下,你可以添加新的页面。例如,创建一个名为About.vue的新文件:

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

然后,在src/router/index.js中添加一个新的路由条目:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

现在,你的应用中就有了一个新的关于页面。

使用插件

Vue CLI 3允许你使用插件来扩展你的项目功能。例如,如果你想使用Vuex来管理状态,可以使用以下命令安装Vuex插件:

vue add vuex

然后,在src/store/index.js中配置你的Vuex store:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // ...
  },
  mutations: {
    // ...
  },
  actions: {
    // ...
  },
  modules: {
    // ...
  },
});

总结

使用Vue CLI 3可以快速地创建和管理Vue项目。通过选择预设配置或手动选择特性,你可以根据项目需求进行配置。项目结构清晰,方便管理和维护。开发和生产构建命令简单易用。你可以轻松地添加新的页面和组件,以及使用插件来扩展项目功能。"