目录
2.点击进去,在搜索框中打开cmd命令提示符,在里面输入创建项目的命令:vue create + 项目名
一、用npm创建项目
可以用ebStrom,这个软件也可以,但比较吃内存
1.在文件夹中创建一个项目(空文件夹)
2.点击进去,在搜索框中打开cmd命令提示符,在里面输入创建项目的命令:vue create + 项目名
3.选择创建方式
4.选择项目需要的特性
空格表示选择,”a"表示全选(all),“i”表示反转(inverse)新手推荐使用1,4,5
Babel:转码器 可以把es6转化成浏览器能够识别的es5(模块化es6出现,有些浏览器不支持,仍使用es5,需要转化一下,具体可以搜索ECMAScript了解ECMAScript_百度百科 (baidu.com))
TypeScript:使用ts文件编写(对类型进行限定,避免弱类型造成的隐患)
Progressive Web App Support:web支持
Router:是否要路由
Vuex:是否要vue扩展
CSS Pre-processors:css解析器
Linter:校验规则(建议新手先不要使用,会提示写错)
Unit Testing:单元测试,前端没有专门的单元测试人员
E2E Testing:点到点测试
4.是否使用路由的历史模式(看个人需求)
5.在哪里存放配置文件信息
6.是否将刚刚的创建过程作为模板供以后项目使用,不推荐
7.点击回车开始创建项目
第一次创建要下载很多模块,依赖,时间较长
8.创建成功。
运行如下命令,启动项目。
进入项目
npm运行项目
打开新建项目的文件夹,有个package.json的json源文件,其实是运行里面的代码
9.内置服务器开始运行
将链接复制到浏览器打开,打开一个模板项目
其实只有一个页面,只不过是在跳转
二、添加新页面
1.在vscode中打开这个项目
2.在App.vue里面添加这样一个链接
|
<router-link to="/book">图书管理</router-link>
3.在router的index里面添加这样的跳转代码块
,
{
path:'/book',//请求的地址
name:'Book',//以名字的方式定义地址
component:()=>import("../views/Book")//要显示的页面组件 懒汉模式加载
}
4.在views文件夹中添加Book.vue
在里面添加如下内容:
import { info } from 'console';
<template>
<div class="book">
<h1>这是图书管理系统</h1>
<p @click="show">{{info}}</p>
</div>
</template>
<script>
// 封装成模块,可以加载到其他页面
export default{
data(){
return{
info:"这是一本书"
}
},
methods:{
show(){
alert("这本书是曹雪芹的《红楼梦》")
}
}
}
</script>
欧克,刷新一下页面你可以看到
三、零碎知识点
正则表达式:箭头表示最低什么版本的配置
其实两个界面在同一个页面,只不过在切换
页面的内容和引用的JS会自动填充到框架中
vue各个模块是完全分开的,很有条理
页面切换控制规则:地址->组件->呈现位置
与ssm的controller相似
控制页面组件的显示
iframe标签:<iframe> 标签是一个内联框架,即用来在当前 HTML 页面中嵌入另一个文档的
<!--scoped:局部组件,表示该样式只在当前组件生效-->
scoped
去掉scoped,对所有div组件生效