查看一下是否可以使用
npm -v
全局文件夹与缓存文件夹设置
在当前文件夹下创建两个文件夹【node_global】与【node_cache】
直接鼠标右键【新建文件夹】即可
打开【cmd】修改配置位置:
我这里E盘,看好自己放置的位置就可以。
npm config set prefix "E:\exe\node-v16.17.0-win-x64\node_global"
npm config set cache "E:\exe\node-v16.17.0-win-x64\node_cache"
打开cmd进行设置即可
设置完毕,咱们再查看一下看看。
修改国内的【阿里】镜像
npm config set registry=http://registry.npm.taobao.org
npm config list
设置完毕后查看一下是否成功,这里查看后可以看到成功了。
可以通过以下命令直接查看镜像配置
npm config get registry
查看vue信息
npm info vue
当前是3.2.39,之前我安装过一个保姆级的版本是3.2.37,可以看到这才2个月升级了2个版本
更新npm
【-g】装到【global下】,就是刚才自己创建的文件夹。
npm install npm -g
新增环境变量
E:\exe\node-v16.17.0-win-x64\node_global\node_modules
查看一下版本是否升级
npm -v
安装vue与router
npm install vue -g
npm install vue-router -g
安装完成后可以在对应的文件夹下看到两个内容一个vue一个route。
安装vue脚手架
npm install vue-cli -g
安装提示
由于没有设置环境变量,暂时vue无法使用。这些命令都在【node_global】文件夹下。
我们需要再添加一个环境变量。
E:\exe\node-v16.17.0-win-x64\node_global
配置完成后查看vue命令是否可以使用。
vue -V
这里的版本还是2.9.6
Vue项目创建
特别备注:项目名称不允许使用数字开头,同时项目命中不允许出现大写字母。
vue init webpack vue01
我们找个空的位置来放置vue项目
连续输入以下命令
cd vue01
npm run dev
稍微等一下就能看到一下提示,可以直接通过提示进行访问。
访问效果:
以上整个内容代表vue脚手架安装成功。
这里咱们使用vscode来编辑vue项目
项目层级
装一个【vetur】插件,显示文本好看。
这回打开就能看到格式了:
demo示例
编码components下的HelloWorld.vue里面的template组件,可以与常规编码处理一样。
数据双向绑定效果
路由
<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="'/home'">Home</router-link>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="{ path: '/home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: '9527' }}">User</router-link>
<!-- 有查询参数,下面的结果为 `/register?plan=private` -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
Register
</router-link>
在router文件夹下可以看到有index.js,这是路由的配置文件,我们在components下创建vue的组件,然后注册到index.js中即可。
路由设置
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import demo1 from '@/components/demo1'
import demo2 from '@/components/demo2'
import demo3 from '@/components/demo3'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ path: '/demo1', name: 'demo1', component: demo1 },
{ path: '/demo2', name: 'demo2', component: demo2 },
{ path: '/demo3', name: 'demo3', component: demo3 }
]
})
咱们的显示主页是App.vue所以我们把我们组件放进去。
<router-link to="/demo1">我是示例1</router-link>
<router-link to="/demo2">我是示例2</router-link>
<router-link to="/demo3">我是示例3</router-link>
访问的主页面
可以通过按钮切换路由
案例测试1
源码
<template>
<div>
<h1>组件路径Demo1</h1>
<table border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>简介</td>
</tr>
<tr v-for="(item,key) in list" :key="key">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.introduce}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data(){
return {
list:[
{id:1,name:"秋兰姑娘",introduce:"兰花"},
{id:2,name:"海棠姑娘",introduce:"海棠花"}
]
}
}
}
</script>
<style>
table{
width:100%;text-align:center;
}
</style>
demo1示例
axios
import axios from 'axios'
引入后会发现cmd的服务文件报错了,要我们npm install --save axios来安装
npm install --save axios
我们需要先停止服务,先安装axios后再二次启动。【Ctrl+c】可以停止服务。
刷面试题
刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。
参考docs.qq.com/doc/DSmRnRGxvUkxTREhO