安装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

        登录页面

        注册

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'}});

        }

    }

}

Reg.vue

        注册页面 

        传过来的账号是：{{this.$route.params.act}}

        {{this.$route.query.title}}

        {{this.$route.params.flag}}

        登录      

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传参

其实你可以把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版本的方法：