安装vue，安装Vetur等好插件，解决空格等的报错，路由配置，界面跳转传参【诗书画唱】
前言：本期专栏我写了1天半左右，很适合vue入门，可以解决新手的很多报错问题，让新手少走弯路，干货满满！
目录：
例子1：安装vue
个人理解VScode中的界面跳转就是在同一个界面中进行组件切换
记得安装Vetur，Vetur 支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如 Sass 和 TypeScript。如果不安装Vetur，vue文件在VScode中就是单色的，而且没有报错提示（vue有些情况下，语法很严格等等，有时不可以在旁边加注释不然会报错。有时空格都会导致报错，比如Missing space before function parentheses（函数括号前缺少空格）等等。
记得注释掉.eslintrc.js文件中的'standard'（我暂时用这种方法解决一些空格等引发报错的缩进等问题），不然注释和空格等等都会引发错误（比如
error Expected indentation of 2 spaces but found 4 ，这个错误其实是缩进问题，意思是代码规范本来是两个空格，结果却发现了4个。）
之所以会产生这个问题，是因为创建项目时使用eslint严格模式。这个模式会要求开发者的代码必须按照严格模式的规范编写，如果有空格或者缩进不规范，就会报错。
例子2：实现vue的路由配置，界面跳转（也就是组件切换功能）。
remote
Signed
ESLint被禁用等的报错的解决方法：
ESLint 是一个开源的 JavaScript 代码检查工具。它可以帮助我们去检查js代码中可能潜在的问题,并且有利于形成良好的编码习惯。无论你是不是初学者都应该尽早去使用它。
Login.vue
Reg.vue
index.js
视频学习截图：
params传参时，地址栏看不到参数的内容，相当于post传参，而query可以在地址栏中看到传过来的参数信息，所以一般我都喜欢用params传参
使用 Vue 开发时，我认为可以提高开发效率的好的VS Code 插件的安装方法
查看自己VScode版本的方法
例子1：安装vue
vuejs项目：
html项目：引入脚本库文件
单页面开发：使用脚手架，vuejs全家桶
搭建vuejs的环境
路由跳转的几种方式
npm install --global vue-cli
全局安装vue脚手架
vue init webpack my_vue_project创建一个自定义名为my_vue_project的文件夹，项目的所有文件都在my_vue_project文件夹下
解决无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本，有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170的方法：
在 Vs Code 终端输入 vue init webpack app， 创建一个名为 app 的 Vue 项目时报错如下：
无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本，有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170
解决报错：
（1）以管理员身份运行vs code
（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
（3）在终端执行：set-ExecutionPolicy RemoteSigned
（4）在终端执行：get-ExecutionPolicy，显示RemoteSigned
此时再使用“vue init webpack 项目名称”创建项目，不会报错
如下：
“Setup unit tests”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车
“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里也同样选择的是“N”
cd my_vue_project（跳转到my_vue_project项目文件夹），回车键后，输入 npm run dev，再按回车键
http://localhost:8080
记得安装Vetur，Vetur 支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如 Sass 和 TypeScript。如果不安装Vetur，vue文件在VScode中就是单色的，而且没有报错提示（vue有些情况下，语法很严格等等，有时不可以在旁边加注释不然会报错。有时空格都会导致报错，比如Missing space before function parentheses（函数括号前缺少空格）等等。
【暂时不管下面的内容：
npm run build
（完成之后，项目文件夹中会出现一个dist文件夹，里面就是打包之后的内容，直接部署就好了。）
】
以上是个人的尝试，也可查看如下内容：
打开你创建的工程目录，可以看到新文件夹mypro。
build 文件夹中的webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置
config文件夹中的index.js文件进行配置代理服务器，打开index.js 找到“proxyTable“这个属性，然后在里面加上对应的后台地址即可，
src文件夹
“assets”: 共用的样式、图片
“components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
“router”: 设置路由
“App.vue”: vue文件入口界面
“main.js：对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置
个人理解VScode中的界面跳转就是在同一个界面中进行组件切换
例子2：实现vue的路由配置，界面跳转（也就是组件切换功能）。
npm install --global vue-cli
（1）以管理员身份运行vs code
（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
（3）在终端执行：set-ExecutionPolicy RemoteSigned
（4）在终端执行：get-ExecutionPolicy，显示RemoteSigned
remote
Signed
vue init webpack my_vue_project
cd my_vue_project（跳转到my_vue_project项目文件夹），回车键后，输入 npm run dev，再按回车键
http://localhost:8080
记得注释掉.eslintrc.js文件中的'standard'（我暂时用这种方法解决一些空格等引发报错的缩进等问题），不然注释和空格等等都会引发错误（比如
error Expected indentation of 2 spaces but found 4 ，这个错误其实是缩进问题，意思是代码规范本来是两个空格，结果却发现了4个。）
之所以会产生这个问题，是因为创建项目时使用eslint严格模式。这个模式会要求开发者的代码必须按照严格模式的规范编写，如果有空格或者缩进不规范，就会报错。
推荐文章：https://blog.csdn.net/hailongcsdn/article/details/107072032
ESLint被禁用等的报错的解决方法：
ESLint 是一个开源的 JavaScript 代码检查工具。它可以帮助我们去检查js代码中可能潜在的问题,并且有利于形成良好的编码习惯。无论你是不是初学者都应该尽早去使用它。
ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.
ESLint被禁用，因为其执行尚未被批准或拒绝。使用灯泡菜单打开批准对话框。
Login.vue
<template>
<div>
<h1>登录页面</h1>
<!-- 组件切换方式一 -->
<router-link :to="{name:'Reg',params:{act: '张三'}}">注册</router-link>
<!-- 组件跳转方式二 -->
<input type="button" value="跳转到注册"
@click="navi();" />
</div>
</template>
<script>
export default {
methods: {
// 点击事件绑定的函数
navi: function(){
//this.$router.push('/reg');
//query传参数时，地址栏中可以看到传过来的参数信息
//this.$router.push({path: '/reg',query: {title: '测试标题'}});
//params传参数时，地址栏中看不到参数的内容,相当于post提交
this.$router.push({name: 'Reg',params: {flag: 'abc'}});
}
}
}
</script>
Reg.vue
<template>
<div>
<h1>注册页面</h1>
<h1>传过来的账号是：{{this.$route.params.act}}</h1>
<h1>{{this.$route.query.title}}</h1>
<h1>{{this.$route.params.flag}}</h1>
<router-link :to="{name: 'Login'}">登录</router-link>
</div>
</template>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//自己加的代码 START
import Login from '@/components/Login'//——>导入Login.vue这个文件
import Reg from '@/components/Reg'//——>导入Reg.vue这个文件
//自己加的代码 END
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
//自己加的代码（设置跳转路径和对应路径中会使用的组件） START
,
{//设置访问跳转路径http://localhost:8080/#/lg时会调用Login.vue组件
path: '/lg',
name: 'Login',//路由跳转时使用
component: Login
},
{//设置访问跳转路径http://localhost:8080/#/reg时会调用reg.vue组件
path: '/reg',
name: 'Reg',//路由跳转时使用
component: Reg
}
//自己加的代码 END
]
})
运行
http://localhost:8080
http://localhost:8080/#/lg
http://localhost:8080/#/reg
http://localhost:8080/#/lg
视频学习截图：
params传参时，地址栏看不到参数的内容，相当于post传参，而query可以在地址栏中看到传过来的参数信息，所以一般我都喜欢用params传参
使用 Vue 开发时，我认为可以提高开发效率的好的VS Code 插件的安装方法
其实你可以把VScode推荐的插件都下载：
Vetur（这个让vue文件颜色不单调，而且提示报错等等，个人认为不错）
Vetur 支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如 Sass 和 TypeScript
ESLint（我暂时没有体会到其好处）
大多数开发人员都熟悉 ESLint，这是最流行的linter工具之一，它可以帮助我们保持代码与最佳实践一致，并在大型代码库中具有可读性。
VueJS有自己的ESLint插件来检查单个文件组件的语法。我认为它是编写可维护和可伸缩代码的最佳工具之一。
没有什么比看一些旧代码甚至不知道从哪里开始调试更糟糕的了。
不用担心！
ESLint可以帮助你保持组织性，并且随着对Vue3的支持的增加，你可以编写可扩展的Vue项目。
Vue VSCode Snippets（暂时体会不到其好处，下了也没事，体积应该也不大）
这个插件基于最新的Vue官方语法高亮文件添加了语法高亮，并且依据Vue 2的API添加了代码片段。
它非常适合编写快速SFC，Vue指令和快速访问生命周期挂钩之类的东西。
Bookmarks（书签一样的插件，好用。当然CTRL+F等等的使用也很方便）
许多VSCode插件只有在大型项目时才真正展现出其全部潜力。
Bookmarks 可以让我们在代码中标记和命名位置。然后，可以在这些不同的书签之间跳转来提高我们的开发速度。
为了找到某个特性，我们需要小心翼翼地上下滚动我们的文件，这样的日子一去不复返了。
Bracket Pair Colorizer（我喜欢这种插件！）
Bracket Pair Colorizer 为代码中的括号添上一抹亮色。我也非常喜欢这种视觉效果–让代码丰富多彩，而又不会让人分心。
Auto Rename Tag（个人认为目前这个插件还行吧）
自动关闭标签，在开始标记的结束括号中键入后，将自动插入结束标记。
每当我们要更改HTML括号对中的一个标签（开始或结束标签）时，Auto Rename Tag会自动重命名另一个标签。
这个小的优化可以帮助防止很多错误，特别是在处理大型模板时.。
NPM Intellisense（我喜欢这个插件）
在导入包时，NPM Intellisense都会自动完成我们的npm模块。
这样可以节省我们记住npm模块确切名称的时间。
Vue 2 Snippets
推荐的我认为写得好的文章：https://mp.weixin.qq.com/s?src=11×tamp=1620890406&ver=3065&signature=129P-YaRWoKi0KltJqsjsjhXHsyyIP1g5fVqEj3s4LPPQ0NpNWQV6OGV2bHJtVmNJFpR7-bl0xirmowBKuvpU2xGdwCB6zlfdjV2ER0cnb5JQMBGaMnpKGo1iPEMGEkK&new=1
查看自己VScode版本的方法：
