node最新版本的安装以及创建vue项目
下载地址
直接下载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:"海棠花"}
]
}
}
}
</script>
下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：
### 进阶阶段
进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。
JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。
我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。
然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。
**1、JavaScript 和 ES6**
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
**2、前端框架**
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
以 Vue 为例，我整理了如下的面试题。
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
