Vue项目实战---创建项目(一)
本节主要讲的是vue项目的创建
一、官网:
二、安装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博客
林子soCool: 重新提交代码问题没解决
MaoriLan: 大佬,请问解决了被测服务重启后覆盖率丢失的问题么
2401_86619270: 修改谈判的在哪个文件
做一个不掉头发的程序汪: 兄弟,你好,麻烦问下你这个写完了么,感谢