您的位置:首页 > Web前端 > Vue.js

创建vue项目步骤、项目目录介绍、es6语法之导入导出、定义并使用组件、集成bootstrap,jQuery,elementui、与后端交互

2022-04-15 18:26 1431 查看

今日内容概要

  • vue-cli创建项目
  • vue项目目录介绍运行项目
  • es6语法之导入导出
  • 定义并使用组件
  • 集成bootstrap,jQuery,elementui
  • 与后端交互

内容详细

1、vue-cli创建项目

# 单文件组件:
一个文件,以 xx.vue 命名,就是一个组件

# vue-cli创建项目,webpack构建---》nodejs环境
nodejs是一门后端语言
类似于javascript解释型语言,只能运行在解释器中
浏览器中集成了js的解释器---》javascript只能运行在浏览器中
谷歌浏览器的v8引擎---》运行在操作系统之上---》os,网络通信的模块,文件处理---》产生 nodejs的解释器
下载安装:
http://nodejs.cn/---》一路下一步---》
cmd命令窗口下---》node命令(python),npm命令(pip)
以往版本:https://nodejs.org/zh-cn/download/releases/

# 在nodejs的环境上装vue-cli:vue脚手架
npm install -g cnpm --registry=https://registry.npm.taobao.org  # 以后使用cnpm替换掉npm即可:下载速度快

cnpm install -g @vue/cli  # 默认源常规下载 速度极慢,淘宝写了工具 cnpm,完全替换npm的功能,使用cnpm会去淘宝镜像站下载,速度快

# 创建项目---》git上拉取
方式一:命令行方式
vue create myfirstvue

方式二:图形化界面
vue ui  # 会启动一个服务,用浏览器访问创建vue项目

"""
此外 还可以使用 vue ui 创建项目(就是在图形化界面中创建项目)
步骤 参考命令行方式即可

GUI :图形化界面,  GUI编程---》图形化界面编程

C#做win平台的图形化界面
python写图形化界面:Tkinter
pyqt: qt是个平台,可以使用c语言,使用python在平台写代码---》做图形化界面
"""

2、vue项目目录介绍运行项目

#  运行项目方式一
在项目路径下:npm run serve

# 运行项目方式二:使用pycharm直接点击运行
看下图二步骤介绍

# 目录介绍
-myfirstvue   # 项目名字
--node_modules  # 放着当前项目所有的依赖,可以删除,删除项目运行不了了,npm install 把该项目的依赖再装上,把项目发给别人,提交到git上,文件夹要删掉
--public  # 文件夹
---favicon.icon  # 小图标
---index.html  # 单页面开发,整个项目就这一个页面,以后不要动
--src  # 以后咱们都是在这里面写东西
---assets  # 放静态资源,图片,js,css
---components  # 组件,xx.vue组件,小组件,给页面组件用
----HelloWorld  # 提供的默认组件,示例
---router  # vue-router就会有这个文件夹
----index.js  # vue-router的js代码
---store  # vuex 就会有这个文件夹
----index.js  # vuex 的js代码
---views  # 组件,页面组件
----AboutView.vue  # 默认提供了示例组件
----HomeView.vue  # 默认提供了示例组件
---App.vue  # 根组件
---main.js  # 项目的入口
--.gitignore  # git的忽略文件
--babel.config.js  # babel配置
--jsconfig.json  # 忽略
--package.json  # 项目的所有依赖,类似于  requirements.txt,不要删,npm install根据这个文件下载第三方模块
--package-lock.json # 忽略
--README.md
--vue.config.js  # vue的配置

3、es6语法之导入导出

# js 模块化开发--》引出 模块,包的概念
# 写了一个包,在其他js中导入使用

### 导入
import 起个名字 from '路径'

import Vue from 'vue'  # 起了个名字叫 Vue,vue在node_modules中了,直接写名字即可

// 演示代码--》导入使用--》拿到的就是导出的对象
// 新建目录下文件:assets/js/ settings.js 文件
import settings from '../assets/js/settings'
console.log(settings.name)
console.log(settings.printName())
"""
### settings.js 文件内容:

// es6的 let:变量   和   const:常量
// 原来定义变量 var 变量 = 值  --->很多坑,会有变量提升,变量作用也后坑
// 现在建议使用 let const 定义

let name = 'lqz'

function printName() {
console.log(name)
}
// 把对象导出
export default {name,printName:printName}
"""

### 导出
export default 对象

// 演示代码
let name = 'lqz'
function printName() {
console.log(name)
}
// 把对象导出
export default {name:name,printName:printName}

# 包的导出---》文件夹下新建index.js
# 包导入的时候,导到文件夹这一层即可
import lqz from '../lqz'
console.log(lqz.name)

4、定义并使用组件

# 新建一个 xx.vue,内部包含三块
<template>  # 写原来模板字符串``   html内容
</template>

<script>
export default {
data(){retrun {
name:'lqz'
}},
methods:{},
}
</script>

<style scoped>  # scoped 样式只在当前组件中生效
</style>

# 自定义组件
# 在components目录下新建 xx.vue文件:
<template>
<div>
<h1>{{ name }}</h1>
<button @click="handleC">点我看美女</button>
</div>
</template>

<script>
export default {
name: "jgx",
data() {
return {
name: "jgx is nb"
}
},
methods: {
handleC() {
alert('美女')
}
}
}

<style scoped>
h1 {
background: pink;
font-size: 60px;
text-align: center;
}
</style>

5、集成bootstrap,jQuery,elementui

# bootstrap---》ui---》后期一般不用bootstap
第一步:下载
npm install bootstrap@3 -S  # -S表示把当前模块加入到package.json文件中
npm install jquery

第二步在main.js中配置
// bootstrap的配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

第三步:vue.config.js中
const {defineConfig} = require('@vue/cli-service')
const webpack = require("webpack");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
},
})
# 专门给vue的ui库--》写ui尽量用它

第一步:下载
cnpm install element-ui -S

第二步:main.js 配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

6、与后端交互

第一步:安装
cnpm install axios -S
第二步:main.js 配置
import axios from 'axios'
Vue.prototype.$axios = axios;

第二步:使用
# 在任意组件中
# this.$axios   就是axios对象
this.$axios.get().then(res=>{})

第三步:如果没有第二步的配置
# 在任意组件中
import axios from 'axios'
axios.get('').then(res=>{})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐