Vue3.0结合bootstrap做多页面应用(1)创建项目
本人主要做c# winform应用,刚接触vue,发现用vue做单页面应用的比较多,多页面的资料很少,特别是用vue3.0版本做多页面的资料,更少,所以自己整理一下,结合bootstrap和jquery,也可以给有需要的同行做个参考。
1.首先用 vue --version 命令查一下安装的vue-cli版本,要3.x版本,我原先装的是2.9.6版本的
2.卸载vue-cli,执行命令:cnpm uninstall -g vue-clinpm uninstall -g vue-cli ,执行完就好了
3.安装vue-cli3.x版本:cnpm install -g @vue/cli
4.安装完毕后,查看一下版本:默认装的最新版,3.8.2
5.切换到你的项目文件夹,准备创建项目吧,cmd命令操作就好了
6.执行 vue create <项目名称>创建项目吧,我这里直接用j做测试好了
7.新版的项目创建,会有选项可以配置,这里就不做赘述,百度有哈,一路默认回车也可以
从别人那里看到的配置图,可以参考:
8.项目安装完了会有如下提示
9.执行cd j 跳转到项目路径内
10.执行 npm run serve 命令,即可启动服务
可以看到有两个地址,第一个是用于本地测试,第二个是用于局域网测试,复制其中一个到浏览器运行即可。
先写这么多,可以关注后续的更新哈
Vue3.0结合bootstrap做多页面应用(1)创建项目的更多相关文章
- Vue3.0结合bootstrap做多页面应用(2)基础配置
接下来就是多页面应用的配置啦,安装完vue 3.0可以发现目录比2.0的精简了很多, public相当于原来的static,里面的index.html是项目的入口 ,src同以前一样,cli3.0没有 ...
- vue2.0 与 vue3.0 配置的区别
提示:要了解vue2.0与vue3.0区别,首先你要熟悉vue2.0 从最明显最简单的开始 项目目录结构 可以明显的看出来,vue2.0与3.0在目录结构方面,有明显的不同(vue3.0我是安装了cs ...
- Vue-cli创建项目从单页面到多页面2-history模式
之前讲过怎样将vue-cli创建的项目改造成多页面(vue-cli创建项目从单页面到多页面),今天说一下怎样在多页面的前提下使用history模式. 如何使用history模式 因为vue默认的has ...
- 预计2019年发布的Vue3.0到底有什么不一样的地方?
摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...
- 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 使用vue3.0和element实现后台管理模板
通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到mlab,这里的数据是存放这登录注册,只有 ...
- vue3.0 + ueditor
公司有个需求,需要做个发送邮件的模版(富文本对于模版的扩展性更好吧) 关于富文本,也找了一些好看且支持vue的,但是功能都没有百度全面 反正这个系统也是自己人用,颜值无所谓了 关于vue2.0+ued ...
- vue3.0和2.0的区别,Vue-cli3.0于 8月11日正式发布,更快、更小、更易维护、更易于原生、让开发者更轻松
vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快.更小. ...
- vue3.0创建项目和基本配置
借鉴博客:https://www.jianshu.com/p/6307c568832d/ https://www.cnblogs.com/KenFine/p/10850386.html 项目创建好后, ...
随机推荐
- Bash Shell中的特殊位置变量及其应用
Bash Shell中的特殊位置变量及其应用 众所周知bash shell中有许多特殊的位置变量,灵活使用它们可以更好地发挥Shell脚本的功用. 即位置变量:$1,$2,...来表示,用于让脚本在脚 ...
- Django模板技术
Django模板技术 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模板概述 1>.模板的作用 如果使用react实现前端页面,其实Django就没有必须使用模板,它其 ...
- angular-依赖注入 显示注入/隐式注入
1.隐式注入:不需要开发人员干预,angularJS自动根据参数的名称识别和注入数据 app.controller("myCtrl".function($scope) { $sco ...
- python脚本测试websocket接口协议
import websocket url = 'wss://host:port/rt/tr' #websocket连接地址 ws = websocket.create_connection(url) ...
- Nat类型测试
这是一个测试NAT类型的小工具,一般也没太多用处,只有游戏玩家可能需要用来测试你的网络NAT类型是什么.NAT类型一般分为以下4种: 1. Full Cone NAT (完全圆锥型)2. Restri ...
- 201871010101-陈来弟《面向对象程序设计(java)》第四周学习总结
...
- Pycharm过期了怎么办?
Pycharn过期了,打开Pycharm,选择help,倒数第三个register,用激活码进行激活,具体情况见激活码,侵删
- 第二阶段冲刺(个人)——six
今天的计划:选择功能界面的logo.背景与功能选择框的整体设计组合. 昨天做了什么?优化登录.注册信息的填写判断. 困难:无.
- Pandas | 08 重建索引
重新索引会更改DataFrame的行标签和列标签. 可以通过索引来实现多个操作: 重新排序现有数据以匹配一组新的标签. 在没有标签数据的标签位置插入缺失值(NA)标记. import pandas a ...
- String数组转int数组
假设我们有一个字符串数组: String[] strings = {"1", "2", "3"}; 使用Lambda表达式(自Java 8起 ...