vue脚手架(2024年9月份nodejs16

node最新版本的安装以及创建vue项目

下载地址

Index of /dist/v16.17.0/

直接下载16.17.0winx64.zip的压缩包即可

我下载的免安装版本，我这里有中文路径，所以我需要换一个没有中文路径的位置。剪切一下。

环境变量设置

换了一个没有中文路径的地方

配置一下环境变量，根据以下8个步骤配置即可。

查看一下是否可以使用

复制代码

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:"海棠花"}
       ]


### 最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

*   HTML5新特性，语义化

*   浏览器的标准模式和怪异模式

*   xhtml和html的区别

*   使用data-的好处

*   meta标签

*   canvas

*   HTML废弃的标签

*   IE6 bug，和一些定位写法

*   css js放置位置和原因

*   什么是渐进式渲染

*   html模板语言

*   meta viewport原理

![](https://img-blog.csdnimg.cn/img_convert/64590c67cb47cd552a892ba710477f64.png)



![](https://img-blog.csdnimg.cn/img_convert/17fdfcb90fad04acc5e7273d1f853880.png)