Vue项目实战---创建项目（一）

本节主要讲的是vue项目的创建

一、官网：

介绍 | Vue CLI

二、安装Vue CLI

使用Vue CLI 创建项目

1、需要先安装node.js

2、需要安装Vue CLI

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果安装时，报权限不够，

使用sudo

sudo npm install -g @vue/cli

检查是否安装成功：

vue --version

还需要安装yarn管理器

yarn管理器，在cmd窗口安装一个yarn管理器即可

npm install -g yarn

三、创建项目

通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

1、点击创建

2、选择项目所在的路径

3、填写项目名称

4、点击下一步

 5、选择手动配置项目

 6、选择功能

我们只需要勾选Babel 与 Router这两个项目就可以 了。

千万别勾选Lintest / Formatter。这个是校验代码格式的，需要遵循一定的书写规范，不然会报错，但是我们不是专业的前端，不了解这个规范，所以不要勾选。

7、选择vue版本，我们这里选择2.x就可以了

8、可以保存为预设（如果下次想直接用刚刚的配置），也可以不保存为预设。

四、项目介绍

使用工具HBuilderX 打开刚刚创建的项目。

文件--导入--从本地目录导入

项目结构：

 node_modules: 依赖包存放的路径

src：代码的路径

main.js,整个项目的运行入口。

 

main.js 中，将Vue对象，挂在到 了App.vue文件中的，id="app" 标签中。

App.vue，才是核心代码文件。

App.vue，主要包含三部分内容。

<template>

<script>

<style>

asstes：放置静态文件

components:放置组件

router:配置路由

五、给项目安装依赖和插件 

5.1 安装element UI

一、打开vue 图形化界面

1、点击插件

2、点击添加插件

3、搜索element

4、勾选 element

5、点击安装

配置插件页面，默认就行，直接点下一步安装

 

一直点击下一步：显示已经安装完成

5.2 安装axois

方式一：(插件）

通过插件安装，和上面的步骤一样，搜索axois,然后安装

方式二：依赖（使用这种方式）

通过依赖安装。

1、点击依赖，

2、点击安装依赖

3、搜索axois

4、勾选 axois

5、点击安装 axios 

插件与依赖是有区别的，插件安装完后，系统会自动导入。

依赖安装完后，需要手动导入。

我们通过依赖安装完axois，需要手动导入axoix

在main.js文件中。

import axios from 'axios'

六、启动项目

在GUI界面，点击----任务---serve---运行

然后点击启动app

进入我们的项目页面

 七、清理默认数据

启动项目后，项目展示的是系统的默认数据，我们需要把默认数据清理掉，然后改成自己的数据。

1、清理App.vue 文件

a、将<div id="app">    </div> 内的数据清理掉

b、import HelloWorld from './components/HelloWorld.vue' 删除掉

c、export default {}里面的内容删除掉

d、<style> 里面的内容删除掉

 最后删除完的效果：

<template>
  <div id="app">
  </div>
</template>

<script>


export default {

}
</script>

<style>

</style>

2、删除views文件夹

3、清理router文件

删除

import HomeView from '../views/HomeView.vue'

删除const routes = []里面的数据

删除完后，最后的样式

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes
})

export default router

八、创建登录组件

创建登录组件，login.vue

下一章：

Vue实现自动化平台（二）_做测试的喵酱的博客-CSDN博客