使用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.在文件夹中创建一个项目（空文件夹）

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组件生效