使用VScode和npm创建前端项目,并进行修改 |
您所在的位置:网站首页 › jquery改变div内容 › 使用VScode和npm创建前端项目,并进行修改 |
目录 一、用npm创建项目 1.在文件夹中创建一个项目(空文件夹) 2.点击进去,在搜索框中打开cmd命令提示符,在里面输入创建项目的命令:vue create + 项目名 3.选择创建方式 4.选择项目需要的特性 5.在哪里存放配置文件信息 6.是否将刚刚的创建过程作为模板供以后项目使用,不推荐 7.点击回车开始创建项目 8.创建成功。 9.内置服务器开始运行 二、添加新页面 1.在vscode中打开这个项目 2.在App.vue里面添加这样一个链接 3.在router的index里面添加这样的跳转代码块 4.在views文件夹中添加Book.vue 三、零碎知识点 其实两个界面在同一个页面,只不过在切换 页面的内容和引用的JS会自动填充到框架中编辑 vue各个模块是完全分开的,很有条理 页面切换控制规则:地址->组件->呈现位置 控制页面组件的显示 scoped 一、用npm创建项目可以用ebStrom,这个软件也可以,但比较吃内存 1.在文件夹中创建一个项目(空文件夹)空格表示选择,”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.是否使用路由的历史模式(看个人需求) ![]() 第一次创建要下载很多模块,依赖,时间较长 运行如下命令,启动项目。 进入项目 npm运行项目 打开新建项目的文件夹,有个package.json的json源文件,其实是运行里面的代码 9.内置服务器开始运行 将链接复制到浏览器打开,打开一个模板项目 其实只有一个页面,只不过是在跳转
| 图书管理 3.在router的index里面添加这样的跳转代码块 , { path:'/book',//请求的地址 name:'Book',//以名字的方式定义地址 component:()=>import("../views/Book")//要显示的页面组件 懒汉模式加载 } 4.在views文件夹中添加Book.vue 在里面添加如下内容: import { info } from 'console'; 这是图书管理系统{{info}} // 封装成模块,可以加载到其他页面 export default{ data(){ return{ info:"这是一本书" } }, methods:{ show(){ alert("这本书是曹雪芹的《红楼梦》") } } }欧克,刷新一下页面你可以看到
三、零碎知识点 正则表达式:箭头表示最低什么版本的配置 其实两个界面在同一个页面,只不过在切换![]()
vue各个模块是完全分开的,很有条理 与ssm的controller相似 iframe标签: 标签是一个内联框架,即用来在当前 HTML 页面中嵌入另一个文档的
去掉scoped,对所有div组件生效
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |