使用VScode和npm创建前端项目，并进行修改 |
您所在的位置：网站首页 › vue前端项目启动 › 使用VScode和npm创建前端项目，并进行修改 |
使用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.是否使用路由的历史模式（看个人需求）
 7.点击回车开始创建项目
第一次创建要下载很多模块，依赖，时间较长
运行如下命令，启动项目。 进入项目 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组件生效
|
【本文地址】
今日新闻 |
推荐新闻 |