位置: IT常识 - 正文

Vue-CLI 项目搭建(用vue-cli搭建项目)

编辑:rootadmin
CLI创建项目、如何删除CLI预设、Vue项目目录及运行、es6语法之导入导出、定义并使用组件、集成Bootstrap,jQuery,Elementui、使用axios与后端交互 ... 目录Vue-CLI 项目搭建

CLICLI创建项目

方式一:命令行创建-vue create方式二:使用图形化界面-vue ui如何删除CLI预设Vue项目目录及运行

运行

package.json中目录es6语法之导入导出

导入导出包定义并使用组件集成Bootstrap,jQuery,Elementui

下载Bootstrap和jQuery配置Bootstrap和jQuery下载elementui配置elementui使用axios与后端交互Vue-CLI 项目搭建

推荐整理分享Vue-CLI 项目搭建(用vue-cli搭建项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue cli项目创建,vue cli构建项目,vue的搭建,使用vue-cli快速搭建vue项目,使用vue-cli快速搭建vue项目,vue cli3搭建项目,vue cli构建项目,使用vue-cli快速搭建vue项目,内容如对您有帮助,希望把文章链接给更多的朋友!

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

没有安装好cli脚手架的可以继续安装:

?Vue CLI 官网文档

?Node.js安装详细教程

安装好脚手架后,我在安装的过程中发现使用npm自带的源太慢了,可以切换源

在nodejs的环境上装vue-cli:vue脚手架-npm install -g cnpm --registry=https://registry.npm.taobao.org -以后使用cnpm替换掉npm即可:下载速度快-cnpm install -g @vue/cli # 速度慢,淘宝写了工具 cnpm,完全替换npm的功能,使用cnpm回去淘宝镜像站下载,速度快

我装的最新版本nodejs,如果想装旧版本参考下文档:

?旧版本:https://nodejs.org/zh-cn/download/releases/

Node第一个程序:Hello world

CLI创建项目方式一:命令行创建-vue create

运行以下命令来创建一个新项目:

vue create item

选择Manually,手动选择功能,然后回车

使用空格选择,Babel、Router、Vuex

Babel:es版本转换,比如es6语法在浏览器不支持,那么它会帮我们转换到支持的版本

Router:路由跳转

Vuex:状态管理器(存数据)

Vue版本选择

Router选择

选择package管理

保存配置选择作为历史选择

配置名

成功:不成功建议使用管理员创建就行了

方式二:使用图形化界面-vue ui

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

vue uiVue-CLI 项目搭建(用vue-cli搭建项目)

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

如何删除CLI预设

这里的预设不需要如何删除?按照如下路径找到.vuerc打开删除即可

C:\Users\3547

打开.vuerc

再次创建项目就没有预设了

Vue项目目录及运行运行运行项目方式一:在项目路径下输入npm run serve

运行项目方式二:pycharm运行

package.json中"scripts": { "serve": "vue-cli-service serve", # 运行项目 "build": "vue-cli-service build", # 编译项目成html,css,js "lint": "vue-cli-service lint" # 代码格式化},目录

# 目录介绍-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 # 组件,页面组件 -About -Home # 默认提供了示例组件 -App.vue # 根组件 -main.js # 项目的入口于 -.gitignore # git的忽略文件 -babel.config.js # babel配置 -package.json # 项目的所有依赖,类似于 requirements.txt,不要删,npm install根据这个文件下载第三方模块 -vue.config.js # vue的配置es6语法之导入导出

类似python中的导入包、模块,JS模块化开发,在其他JS中导入使用

导入语法:

import 自定义名字 from '路径'Eg:import Vue from 'vue' //内置的//如果是自定义的写自己的路径

导出语法:

导出单个对象:export default 方法名/变量名eg:export default 变量名 export default 方法名导出多个对象:export default {key:value,key1:value1···} //key自定义名字,value对象js文件中的方法名或变量名eg:export default {name:name,printName:printName}//key值也可以省略export default {value,value1···}

注意:必须先导出之后才能导入使用

demo:

//导出:let name = 'HammerZe'function printName() { console.log(name)}// 把对象导出export default {name:name,printName:printName}//导入//导出多个对象再导入使用的时候就可以通过对象.方法/变量使用import settings from '路径'settings.namesettings.printName()导入导出包

导入出包和上面一样,导入包只导入到包这一层就可以了,比如:info包下的info.js文件导出,导入的路径只写到info就可以了

//导出let name = 'HammerZe'let age = 18export default {name,age}//导入import info from ./infoinfo.nameinfo.age定义并使用组件

定义组件包括以下三部分:

第一部分:-<template></template> # 写原来模板字符串``,html内容第二部分:-<script></script> # 写export default导出的对象eg:-<script> export default { data(){retrun { name:'mycomponent' }}, methods:{}, }</script>第三部分:-<style scoped> # scoped 样式只在当前组件中生效</style>

组件在项目中如何使用,如下:

自定义组件mycomponent.vue

<template><div > <h2>{{name}}</h2> <button @click="handleClick">百度一下</button></div></template><script>export default { name: "mycomponent", data(){ return { name:'HammerZe' } }, methods:{ handleClick(){ window.location.href="http://www.baidu.com" } }}</script><style scoped>h2{ background-color: tomato; align-content: center;}button{ background-color: aqua;}</style>

重写AboutView.vue显示自定义组件

<template> <div><!--用在div里--> <mycomponent></mycomponent> </div></template><script>// @ is an alias to /srcimport mycomponent from '@/components/mycomponent.vue'export default { name: 'AboutView', //组件名一般和文件名一致 components: { //注册自定义组件 mycomponent }}</script>

集成Bootstrap,jQuery,Elementui下载Bootstrap和jQuerynpm install bootstrap@3 -Snpm install jquery -S

配置Bootstrap和jQuery

Bootstrap配置

# 在main.js中配置 // bootstrap的配置 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css'

jQuery配置

# 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"] }) ] }, })下载elementui

npm install element-ui -S

配置elementui# 在main.js 配置import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

使用在组件中使用就可以了~

使用axios与后端交互# 第一步,安装 npm install axios -S# 第二步:main.js 配置# 导入import axios from 'axios'# 类的原型中放入变量Vue.prototype.$axios = axios;# 第三步:在任意组件中使用# this.$axios 就是axios对象this.$axios.get().then(res=>{})

如果,没有在main.js中配置,使用如下

import axios from 'axios'axios.get('').then(res=>{})
本文链接地址:https://www.jiuchutong.com/zhishi/311657.html 转载请保留说明!

上一篇:python不能覆盖文件内容如何解决(python 覆盖)

下一篇:DEDECMS php.ini register_globals must is Off!如何解决

  • 苹果13pro屏幕分辨率(iphone13pro分屏)

    苹果13pro屏幕分辨率(iphone13pro分屏)

  • 抖音观看人次怎么设置(抖音观看人次怎么关闭)

    抖音观看人次怎么设置(抖音观看人次怎么关闭)

  • 如何启动OPPO手机的备用电源(oppo手机如何启动)

    如何启动OPPO手机的备用电源(oppo手机如何启动)

  • opporeno4支持开空调吗(oppo reno4 pro 5g怎么开空调)

    opporeno4支持开空调吗(oppo reno4 pro 5g怎么开空调)

  • OPPO Ace2的屏幕是多大(oppo ace2什么屏幕)

    OPPO Ace2的屏幕是多大(oppo ace2什么屏幕)

  • 荣耀30青春版和荣耀x10的区别(荣耀30青春版和华为畅享20pro哪个好)

    荣耀30青春版和荣耀x10的区别(荣耀30青春版和华为畅享20pro哪个好)

  • 苹果耳机能定位吗(苹果耳机能定位最后的位置)

    苹果耳机能定位吗(苹果耳机能定位最后的位置)

  • 屏幕裂了一条缝怎么办(屏幕裂了一条缝贴膜有气泡)

    屏幕裂了一条缝怎么办(屏幕裂了一条缝贴膜有气泡)

  • 3d打印技术是什么意思(3D打印技术是什么原理)

    3d打印技术是什么意思(3D打印技术是什么原理)

  • 6类网线支持多少兆(6类网线支持多少宽带)

    6类网线支持多少兆(6类网线支持多少宽带)

  • qq空间已注销什么意思(qq空间注销什么时候生效)

    qq空间已注销什么意思(qq空间注销什么时候生效)

  • 电脑如何打字打出中文(电脑如何打字打出中文视频)

    电脑如何打字打出中文(电脑如何打字打出中文视频)

  • 手机掉在地上会不会对手机有影响(手机掉在地上会摔坏听筒吗)

    手机掉在地上会不会对手机有影响(手机掉在地上会摔坏听筒吗)

  • vivo手机中的小V怎么找(vivo手机中的小v在哪里可以开启)

    vivo手机中的小V怎么找(vivo手机中的小v在哪里可以开启)

  • 冯诺依曼计算机的基本构件(冯诺依曼计算机的特点)

    冯诺依曼计算机的基本构件(冯诺依曼计算机的特点)

  • 苹果11pro max多长多宽(苹果11pro max多少钱)

    苹果11pro max多长多宽(苹果11pro max多少钱)

  • 快手怎么暂停播放(快手怎么暂停播放功能)

    快手怎么暂停播放(快手怎么暂停播放功能)

  • oppoa9有闪充功能吗(oppoa9x闪充)

    oppoa9有闪充功能吗(oppoa9x闪充)

  • excel中的int函数是什么意思

    excel中的int函数是什么意思

  • 华为消费者bg成立于哪一年(华为消费者bg在哪个城市)

    华为消费者bg成立于哪一年(华为消费者bg在哪个城市)

  • 抖音视频最长多长时间(抖音视频最长多长时间发布)

    抖音视频最长多长时间(抖音视频最长多长时间发布)

  • 魅族16屏幕刷新率(魅族16s屏幕刷新)

    魅族16屏幕刷新率(魅族16s屏幕刷新)

  • 怎么用手机拍一寸照片(怎么用手机拍一寸蓝底照片)

    怎么用手机拍一寸照片(怎么用手机拍一寸蓝底照片)

  • 手机信号有hd是怎么回事(手机信号上面有hd)

    手机信号有hd是怎么回事(手机信号上面有hd)

  • js监听页面或元素scroll事件,滚动到底部或顶部(js监听地址栏)

    js监听页面或元素scroll事件,滚动到底部或顶部(js监听地址栏)

  • cnqmax.exe进程的详细注解 cnqmax进程是病毒吗 安全吗

    cnqmax.exe进程的详细注解 cnqmax进程是病毒吗 安全吗

  • 核定征收的一般纳税人开专票怎么入账
  • 消费税到底是什么
  • 红利税是什么时候扣的
  • 购买研发设备的会计分录
  • 普票能抵扣多少
  • 现金日记账本月合计的红线画法
  • 电子设备残值率的最新规定
  • 援企稳岗补贴的申请理由
  • 有营业执照有什么好处吗?
  • 自行研发的无形资产会计处理
  • 无形资产报废的例题
  • 税率调整之后税额的差异
  • 专票当月抵扣后当月作废会被发现吗
  • 进口关税专用缴款书怎么做分录
  • 税控盘费用冲减管理费用还是营业外收入?
  • 税控盘维护费抵减分录
  • 出口企业免抵增值税
  • 小规模纳税人附加税会计分录
  • 以前年度多做了收入怎样调账
  • 企业发生的以旧换新业务应该按照什么处理
  • 评估资产没有发票和流水怎么办
  • 公司租车交税
  • 土地增值税的税率和速算扣除数
  • 工资薪金所得个人所得税税率表
  • php字符串变量
  • vue解决跨域问题
  • 工会举办的比赛有哪些
  • win7系统任务计划在哪里
  • web安全如何入门
  • 未分配现付是什么意思
  • php实现多条件查询
  • 增值税申报时,里面没有数据怎么办
  • 借递延所得税资产贷以前年度损益调整
  • tomcat的安装配置
  • php公众号推送完整示例
  • php二分查找算法两种方法
  • 公司有收入可不交社保吗
  • 发票金额和打款金额不一致怎么办
  • 车辆转让后的责任谁承担
  • 营改增后新纳入增值税征税范围的有
  • 独立核算的分公司可以汇总纳税吗
  • 主营业务成本结转本年利润会计分录
  • 如何进行会计制度改革
  • 报表怎么报送
  • ERROR CODE: 1175 YOU ARE USING SAFE UPDATE MODE AN
  • 年底要结转净利润怎么算
  • 以前年度损益调整怎么结转
  • 资本金利润率正常范围
  • 已经入库的商品出库了要怎么做会计分录
  • 投入的资金如何做账
  • 怎么理解核销
  • 本期盈余结转会亏损吗
  • 营业账簿如何缴纳税款
  • 油费可以进项抵税吗
  • 工会经费会返还吗
  • 办公用品的发票可以抵扣吗
  • 服务费税额部分计算公式
  • 建账的依据是什么
  • sql语句错误提示
  • win8怎么禁止开机启动项
  • 类似wps office的手机软件
  • 关于要不要关闭Vista中的IPv6功能的问题
  • freebsd ports安装
  • win8安全模式修复
  • centos 安装方法
  • win8界面什么样
  • win7电脑磁盘突然不见了怎么办
  • linux bye
  • python 自定义sort
  • texturepackergui
  • assetstore怎么下载资源包
  • javascript简单
  • 手机gpu过度绘制
  • javascript中的数据类型分为两大类
  • android基础入门教程
  • 分享面试流程
  • 武汉税务代理大概多少钱
  • 2024年深圳房价
  • 外地人在秦皇岛买房
  • 2021年福建省灵活就业人员养老保险缴费标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设