既然有VsCode在手,开发什么的都在这里玩就好了,

一、实用插件

首先,给出很多非常好用的插件

1. Auto Close Tag:自动闭合Html/XML标签;
2. Auto Rename Tag:自动完成另一侧标签的同步修改;
3. Beautify:格式化代码,支持自定义格式化代码规则;
4. Bracket Pair Colorizer:给括号加上不同的颜色,区分不同的区块;
5. Debugger for Chrome:映射vscode上的断点到chrome上,方便调试;
6. ESlint:js语法纠错,配置较为复杂;
7. GitLens:方便查看git日志;
8. HTML CSS Support:智能提示css类型以及id;
9. Html Snippet :智能提示Html标签,以及标签含义;
10. JavaScript(es6) code snippet :es6语法智能提示,以及快速输入;
11. jQuery Code Snippet:jQuery 代码智能提示;
12. Material Icon Theme 和 vscode-icons:最好的vscode主题;
13. open in browser:支持快捷键在浏览器中打开html文件;
14. Path Intellisense:自动提示文件路径,支持各种快速引入文件;
15. Vetur:Vue多功能集成插件。

二、新建并运行一个项目

然后开始创建一个项目玩玩,首先,确保你安装了node.js,VsCode,然后再进行操作,(ps:扩展程序不一样页面可能也会有点小差别)

首先,在vscode新建一个终端
在这里插入图片描述
在终端输入命令npm install -g vue-cli,然后等待安装(vue-cli可以帮助我们快速构建Vue项目)在这里插入图片描述
再输入npm install -g webpack命令,等待安装(打包js的工具)
在这里插入图片描述
安装完成之后就可以开始创建vue项目,首先创建一个文件夹用来存放你的项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是myvue
创建项目命令,输入回车vue init webpack myvue
其中myvue就是项目名称,根据喜好自己取。
在这里插入图片描述
接着会出现一些配置项,可以根据需要配置,也可以默认,直接按回车。
在这里插入图片描述
这里的话它会自动问你要不要安装router,ESlint,反正我是都选了、
然后继续等待安装依赖项。完成之后,一个基本的 vue项目就搭建完了。完成之后的vscode左边可以看到如下目录,其中main.js就是入口。
在这里插入图片描述
也可能并没有显示这个文件夹,这时候我们就点击文件->打开文件夹,然后打开你刚才创建的存放项目的目录。你可以选择直接在NPM脚本这个栏目点击dev右边的运行符号,就可以直接运行,也可以打开终端,输入cd myvue再输入npm run dev,如果你使用第二种,记着cd后面一定是myvue,这不是你的项目名称,而是npm自动创建的项目文件夹。
在这里插入图片描述
然后我们估计提示,去浏览器访问8080端口即可,
在这里插入图片描述
想起当前学springboot的场景,突然明白为什么vue被热捧了。

三、项目结构解析

在这里插入图片描述
在这里插入图片描述

四、vue项目结构启动原理

vue调用顺序: index.html → main.js → app.vue → index.js → components/组件

一般项目创建好后会有三个文件:index.html、main.js、app.vue

1、index.html :所有vue文件都是单页面形式开发,所有vue组件都是通过index.html进行渲染加载。

2、main.js:相当于

java的入口函数,控制初次启动vue项目要加载的组件

import Vue from 'vue' 引入vue

import App from './App' 引入App.vue文件

import router from './router' 引入一段路由配置

Vue.use©全局方法定义为C

el:'#app'这个和index.html中的app组件挂钩。官网解释为:模板将会替换挂载的元素。

watch:用来监听路由的变换,可以用来定义页面切换时的过渡效果
在这里插入图片描述
3、App.vue默认为一个根组件

export 中的name属性组件名字

created:生命周期函数
在这里插入图片描述
其他文件:

-build

-build.js 生产环境构建脚本

-utils.js 构建相关工具方法

-webpack.base.conf.js webpack基础配置

-webpack.dev.conf.js webpack开发环境配置

-webpack.prod.conf.js 生产环境配置

-confg 项目配置

--dev.env.js 开发环境变量

--index.js 项目配置文件

--prod.env.js 生产环境变量

--test.env.js 测试环境变量

-package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息

-src 源码目录

--main.js 入口js文件

--app.vue 根组件

--components 公共组件目录

--title.vue

五、一些基础的修改,HelloWorld项目。

我们打开项目入口文件App.vue,将它修改为

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Hello Vue and VsCode!'
    }
  }
}
</script>

打开8080端口,就得到了如下的结果(也可能不是这样的结果,因为我把index.html也修改了一部分,不过大体不差)
在这里插入图片描述
但是我们的index.html有什么用呢?我们肯定不能一直在vue文件上写页面啊,仔细分析,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分)

总的来说,在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。如何让index.html的内容显示到首页呢,只需要将main.js中的模板注释掉就好了。

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App }
  // template: '<App/>'
})

搞懂了项目框架,再开始深入的学习vue的语法吧。。。前路且长

Logo

前往低代码交流专区

更多推荐