前端-自用

dancria

已于 2022-02-16 10:09:33 修改

阅读量102

点赞数 1

分类专栏：杂谈文章标签：前端

于 2021-07-06 18:12:55 首次发布

本文链接：https://blog.csdn.net/dancria/article/details/118526574

版权

杂谈专栏收录该内容

6 篇文章 0 订阅

订阅专栏

关于前端学习路线的一些建议

创建项目

1,创建个人分支后，在本地文档中然后打开git，刷新远程分支；git remote update origin -p

添加NGINX软件包代理，并配置网址和接口

vs-npu i ,直接安装模块,安装依赖

npm run dev

使用vue搭建项目

@和watch的区别

@ 监听事件，硬件，鼠标，键盘灯

watch：监听数据的变化

安装cli

1.在vscode终端，安装vue-cli 3.0

npm install -g @vue/cli

安装成功后查看版本：vue -V(大写的V)

1.1 在cmd,自己的账号下，查看node -v，npm -v 是否正常；

然后在npm install -g @vue/cli

2.创建项目（我的私人电脑只能通过cmd创建项目，不能通过vs的终端创建项目）

去到指定目录下创建项目（project-name：项目名称）:vue create project-name

default 是默认配置
Manually select features 是自己手动选择
（上下箭头切换，回车确定）

进入到项目目录 cd hello-world

运行项目 yarn serve 或者 npm run serve 控制台显示如下信息

在浏览器中输入http://localhost:8080就可以看到页面

项目的基本架构信息如下；

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── ...
├── config/                     
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。
build/

4.2图形化界面创建项目也可以

Vue-cli3.x以后可以使用图形化界面创建项目，简单方便。

打开cmd命令行，输入命令： vue ui。默认浏览器会自动打开主界面，找到项目创建的页面

如何使用；

0,删除app.vue中的欢迎内容

1，用vs打开文件夹，打开src下components---欢迎文件删除，创建一个新的vue文件baidu（shift+左箭头键获取左箭头，选择vue类型创建）

template中只能添加一个顶级div,其他的要在这个div里面

保存baidu.vue文件

2,在App.vue中components添加baidu，然后import baidu from './components/baidu.vue'

然后

2.1 直接在template中添加<baidu，点击弹出的提示，要加结束符 <class />，script和components中的内容会自动补全。

3，新建运维端，运行npm run serve

vs打开终端：; 2.【Ctrl】+【Shift】+【`】:

//遍历数组最常用的forEach循环，item是数组中的每一项，key是每次循环的数组，下标从零开始，用不到可以不写
//this.数组.forEach
//toFixed是数字后面有三位小数

//NaN:not a number

安装路由（vue2）

1，npm i vue-router(vue-router才是正确的)

进入指定的项目

安装指定版本：npm i vue-router@3.2.0

2，sre中创建文件夹router，创建文件index.js

文件index.js

import Vue from 'vue'
import  Router  from 'vue-router'
Vue.use(Router)
import main from '../components/cla1.vue'
import cla2 from '../components/cla2.vue'
export default new Router({
    mode:'hash',
    routes:[
        {
            name:'首页第1遍',
            path:'/',
            component:main,
        },
        {
            name:'首页第2次',
            path:'/cla2',
            component:cla2, //这里不用引号
        }
    ]
})

补全main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTipvu = false
new Vue({
    router,
    render: h =>h(App),
}).$mount('#app')

修改app.vue内容

主要是在template中添加router-view

<template>

 <div id="app">
   <router-view></router-view>
 </div>
 
</template>

<script>

export default {
  name:'App',
 
  components: {
  }
}
</script>

<style>

</style>

4,最后，在cla1这种页面中添加一个跳转按钮，如写一个方法jump跳转到其他页面

 <button @click="jump">调转页面</button>

 jump(){
      this.$router.push({path:'/cla2'})
    },

跨页面传参

params:缺点：数据刷新会丢失，参数放在

query: 特点数据刷新不会丢失，参数会放到url中，zzz=333

sessionStorage.setItem,本地浏览器存储，在app,applicatin,sessionstorage，关闭当前页面存储消失

localStorage,自己研究下，搜索本地存储；存储一直都在，除非本地删除-----localStorage.removeItem('zzz'),删除本地存储

5，地址传参，：aaa ,动态地址，可以代替任何东西，参数会放到url中，都要加“/”，

取参数：this.$route.params

5.1 公司：懒加载

index.js文件

  {
            name:'cld5第5页',
            path:'/cld5/:dyx/:jk',
            component:()=>import('../components/cld5')
        },

helloWord文件

<template>
  <div class="hello">
    <h1>首页</h1>
    <button @click="jump1">跳转到第1页</button>
    <button @click="jump2">跳转第二页</button>
    <button @click="jump3">跳转第三页</button>
    <button @click="jump4">跳转第四页</button>
    <button @click="jump5">跳转第5页</button>
    
  </div>
</template>
---------------
data(){
    return{
      flag:567,
      session:3,
      local:4,
      usually:'d3',
      gongsi:5
    },

--------------------
jump5(){
      this.$router.push({path:'/cld5/'+this.gongsi+'/'+123})
    },

cld5.vue

<template>
  <div>
      <h1 style="background-color:yellow">第五11页</h1>
  </div>
</template>

<script>
export default {
    

}
</script>

<style>

</style>

参数在url中