创建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=>{})
相关文章推荐
- Vue框架-基础知识(vue指令、实例生命周期、计算属性与监听属性、插槽理解、组件介绍、数据交互、ES6语法等)
- 使用vue-cli创建的项目目录结构详细介绍
- vue工程化之(组件导出与组件导入、插件的引入【swiper,jQuery,animate,bootstrap】、项目打包压缩)
- 基于vue-cli创建的项目的目录结构及说明介绍
- 在Vue项目中使用npm安装bootstrap以及jquery
- 集成vue到jquery/bootstrap项目
- 021医疗项目-模块二:药品目录的导入导出-介绍poi类
- 020医疗项目-模块二:药品目录的导入导出-介绍药品表
- React(1) 关于创建React项目及 基础语法 和React父子组件传值概要 State和Props介绍 this指向
- 使用vue2.0创建的项目的步骤方法
- 集成vue到jquery/bootstrap项目
- Vue学习1-1.基础语法;2.指令:表单输入绑定,文本渲染;3.组件:定义组件,使用组件
- 使用Vue cli 快速创建Vue项目步骤
- vue项目中使用axios实现简单前后端交互
- Vue前后端分离项目与vue-baidu-map百度地图api整合使用步骤
- [使用 Weex 和 Vue 开发原生应用] 0 项目介绍和文章目录
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
- Outlook express 2010 使用技巧(配置账户 导出和导入联系人 创建规则和来信提示 创建快速步骤)
- 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
- 使用IDEA创建javaweb项目并配置详细步骤+导出war包详细步骤