用后台开发的逻辑理念学习VUE

vue

前言

近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发工具可以发布打包程序,甚至还可以独立连接数据库,当然了,优点与缺点共存,不能向其他语言那样断点调试导致了,它的脉络更难被捕捉,犹如远古时代的代码开发一样,但它还是已经可以称为一门编程技术了,所以学习一门前端开发,已经是一件非常有意义的事儿了。

新建项目

首先安装Nodejs,然后我们一起学习使用Vue。

安装Nodejs参考:【在Windows下学习Nodejs、Npm和VUE】

Vue是一个前端框架,安装了Nodejs后,可以使用Npm命令直接下载vue。

打开cmd窗口,依次输入如下命令:

npm i vue -g

npm i vue-cli -g

注:输入【npm i vue -g】下载vue时,尽量使用-g,因为vue的文件中有一些文件是可以vue开头的命令行的,因为-g是下载到环境变量配置的Path地址,所以如果下载到这里,那么vue开头的命令就可以在cmd窗口中直接使用了,不然还需要重新配置环境变量,添加当前下载目录。

npm i module_name -S 即 npm install module_name --save 写入dependencies,发布到生产环境

npm i module_name -D 即 npm install module_name --save-dev 写入devDependencies,发布到开发环境

npm i module_name -g 即 global全局安装(命令行使用)

npm i module_name 即 本地安装(将安装包放在 ./node_modules 下)

下载完Vue后,我们新建一个文件夹,然后打开CMD跳转该目录,如【cd/d F:\Nodejs2】,然后使用vue开头的命令创建一个项目,在cmd窗口输入命令如下:

vue init webpack my-project

输入完命令后,会提示我们配置项目信息,可以一直回车使用默认配置,然后等待项目创建完成。

该命令创建的项目是VueCli2.0模板的项目,VueCli3.0以上使用vue create xxx(名称))。

vue create my-project

卸载vuecli2安装vuecli3及以上

npm uninstall vue-cli -g 卸载旧版本

npm cache clean --force 清除缓存

npm install -g @vue/cli@3 安装Vue CLI 3

npm install -g @vue/cli 安装Vue CLI 4

npm -V

npm update

注:输入vue init webpack my-project后,不要切换窗口,一直回车,就可以创建成了,如果切换窗口了,切换回当前cmd窗口后,回车有时候无法直接输入,需要操作下才能输入,比如先按一下个上下左右键。

项目创建完成后,得到如下界面内容。

项目创建完成,我们会在目录下多了一个文件夹—my-project。

然后我们在通过CMD命令在跳转到项目目录【cd/d F:\Nodejs2\my-project】,然后运行npm install,进行初始化。

npm install

最后,我们再输入命令npm run dev,得到窗体如下:

然后打开浏览器,输入http://localhost:8080,vue项目运行成功,如下图:

注:vue自带了一个类似server.js的配置,所以运行npm run dev命令后,会启动一个服务器。

学习项目

通过VisualStudioCode将新建的项目打开。

刚刚安装的VSCode需要禁用JS-CS-HTML Formatter插件,不然保存代码时会自动格式化了,然后html代码全乱了

禁用方法:ctrl+shift+X调出扩展,搜索JS-CS-HTML Formatter ,然后禁用,然后重启。

新建项目结构如下图:

结构描述如下表:

文件夹/文件描述
build项目构建(webpack)相关代码
config配置目录,包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件。
static静态资源目录,如图片、字体等。
test初始测试目录,可删除
.其他文件这些是一些配置文件,包括语法配置,git配置等。
index.html这是一个模板文件,同时又是Main.js的展示页面,也可以理解为Index.html的ViewModel是Main.js,Main.js是项目启动的入口。项目启动时Main.js会读取该页面,然后把当前显示的vue文件渲染进该页面。类似于MVC中的layout.cshtml文件的作用。
package.json项目配置文件。
README.md项目的说明文档,markdown 格式

src核心

src是我们代码编写的核心文件,其内容如下:

assets: 放置一些图片,如logo等。

components: 目录里面放了一个组件文件,可以不用。

App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用components 目录。

main.js: 项目的核心文件。

代码详解

Main.js

Main.js是项目的入口,类似其他语言的Main函数,代码如下:

import Vue from \'vue\'//引入vue.js文件

import App from \'./App\'//引入当前目录下的App.vue文件,【./】指当前目录,【.vue】被隐藏了

import router from \'./router\'//引入当前目录下router文件夹下的Index.js文件

Vue.config.productionTip = false//屏蔽调试时的一些console日志内容

/* eslint-disable no-new */

new Vue({

el: \'#app\',

router,//指定路由的js对象

components: { App },//加载上方导入到组件。

template: \'<App/>\'//选择一个组件去替换index.html 中的<div id="app"></div>。这里使用我们components导入的App组件,相当于指定初始化时的显示组件,Vue组件注册后可以使用<tagName></tagName>的模式来使用组件。可以参考—https://www.runoob.com/vue2/vue-component.html

})

import

import类似其他语言的引入命名空间或引入包,这里主要是用于引入js文件和vue文件。

如果引入的是js文件,则鼠标放到引用上,会显示具体引用路径,如下图:

new Vue

new Vue这一段是创建一个js的Vue对象,该对象的构造函数,接受一个对象,这里传了一个匿名对象,我们可以看到,new Vue后的圆括号【(】里,跟了一对大括号【{】,然后这个对象里,有几个属性,需要初始化。

el:估计是element的缩写,表示Vue绑定的元素。

router:router是我们上面引入的router文件夹下的Index.js文件,打开文件,代码如下:

import Vue from \'vue\'

import Router from \'vue-router\'

import HelloWorld from \'@/components/HelloWorld\'

Vue.use(Router)

export default new Router({

routes: [

{

path: \'/\',

name: \'HelloWorld\',

component: HelloWorld

}

]

})

可以看到,代码中开放了一个默认的Router类型的对象,这个对象是vue-router中定义的,用于定义页面跳转路由,这里定义了路径HelloWorld对应导入/components/HelloWorld.vue文件。

ps:export类似于其他语言的public,就是公开该js文件的某个对象或函数,export default就是默认公开的那一个,这样其他js文件使用import导入该js文件时,就可以省略指定对象这几个代码,这种是一个很原始的程序设计风格,大家还需要适应。

App.Vue

App.Vue是Main.js默认加载的模块,其代码如下:

<template>

<div id="app">

<h2>Kiba518</h2>

<router-view/>

</div>

</template>

<script>

export default {

name: \'App\'

}

</script>

<style>

#app {

font-family: \'Avenir\', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style> 

这里主要是用于配置路由视图—— <router-view/>,其他的样式我们可以暂时忽略。

可以看到我们把路由视图(router-view)配置在了一个div中,并且还放在了一个H2下面,这样,我们的这个H2标签就永远会在路由视图上面了。

运行项目

我们对App.Vue和HelloWorld.vue进行了简单修改,然后不用重启,不用编译,只需要重新切换回刚刚的那个网页——http://localhost:8080。

如上图所示,我们得到了修改页面。

----------------------------------------------------------------------------------------------------

到此Vue的基本使用已经介绍完了。

----------------------------------------------------------------------------------------------------

注:此文章为原创,任何形式的转载都请联系作者获得授权并注明出处!
若您觉得这篇文章还不错,请点击下方的【推荐】,非常感谢!

https://www.cnblogs.com/kiba/p/13673631.html

以上是 用后台开发的逻辑理念学习VUE 的全部内容, 来源链接: utcz.com/z/377603.html

回到顶部