一篇超完整的Vue新手入门指导教程

⽬录

前⾔学习项⽬代码详解运⾏项⽬总结

前⾔

新建项⽬近些年前端开发快速发展，现在学习前端已经不像以前那样仅仅学习⼀个语法就可以了，它已经是⼀门编程技术了，它们有⾃⼰独⽴的类似Main函数的⼊⼝，有像MVC⼀样规范好的层次结构，有⾃⼰的开发⼯具可以发布打包程序，甚⾄还可以独⽴连接数据库，当然了，优点与缺点共存，不能向其他语⾔那样断点调试导致了，它的脉络更难被捕捉，犹如远古时代的代码开发⼀样，但它还是已经可以称为⼀门编程技术了，所以学习⼀门前端开发，已经是⼀件⾮常有意义的事⼉了。⾸先安装Nodejs，然后我们⼀起学习使⽤Vue。

Vue是⼀个前端框架，安装了Nodejs后，可以使⽤Npm命令直接下载vue。打开cmd窗⼝，依次输⼊如下命令：

npm i vue -gnpm i vue-cli -g

注：输⼊【npm i vue -g】下载vue时，尽量使⽤-g，因为vue的⽂件中有⼀些⽂件是可以vue开头的命令⾏的，因为-g是下载到环境变量配置的Path地址，所以如果下载到这⾥，那么vue开头的命令就可以在cmd窗⼝中直接使⽤了，不然还需要重新配置环境变量，添加当前下载⽬录。

下载完Vue后，我们新建⼀个⽂件夹，然后打开CMD跳转该⽬录，如【cd/d F:\\Nodejs2】，然后使⽤vue开头的命令创建⼀个项⽬，在cmd窗⼝输⼊命令如下：

vue init webpack my-project

输⼊完命令后，会提⽰我们配置项⽬信息，可以⼀直回车使⽤默认配置，然后等待项⽬创建完成。

注：输⼊vue init webpack my-project后，不要切换窗⼝，⼀直回车，就可以创建成了，如果切换窗⼝了，切换回当前cmd窗⼝后，回车有时候⽆法直接输⼊，需要操作下才能输⼊，⽐如先按⼀下个上下左右键。

项⽬创建完成后，得到如下界⾯内容。

项⽬创建完成，我们会在⽬录下多了⼀个⽂件夹—my-project。

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

npm install

最后，我们再输⼊命令npm run dev，得到窗体如下：

注：vue⾃带了⼀个类似server.js的配置，所以运⾏npm run dev命令后，会启动⼀个服务器。

学习项⽬

刚刚安装的VSCode需要禁⽤JS-CS-HTML Formatter插件，不然保存代码时会⾃动格式化了，然后html代码全乱了通过VisualStudioCode将新建的项⽬打开。禁⽤⽅法：ctrl+shift+X调出扩展，搜索JS-CS-HTML Formatter ，然后禁⽤，然后重启。新建项⽬结构如下图：

结构描述如下表：⽂件夹/⽂件buildconfigsrcstatictest.其他⽂件index.html

描述

项⽬构建(webpack)相关代码

配置⽬录，包括端⼝号等。我们初学可以使⽤默认的。

这⾥是我们要开发的⽬录，基本上要做的事情都在这个⽬录⾥。⾥⾯包含了⼏个⽬录及⽂件。静态资源⽬录，如图⽚、字体等。初始测试⽬录，可删除

这些是⼀些配置⽂件，包括语法配置，git配置等。

这是⼀个模板⽂件，同时⼜是Main.js的展⽰页⾯，也可以理解为Index.html的ViewModel是Main.js，Main.js是项⽬启动的⼊⼝。项⽬启动时Main.js会读取该页⾯，然后把当前显⽰的vue⽂件渲染进该页⾯。类似于MVC中的layout.cshtml⽂件的作⽤。

node_modulesnpm 加载的项⽬依赖模块

package.json项⽬配置⽂件。

README.md项⽬的说明⽂档，markdown 格式src核⼼

src是我们代码编写的核⼼⽂件，其内容如下：assets: 放置⼀些图⽚，如logo等。

components: ⽬录⾥⾯放了⼀个组件⽂件，可以不⽤。

App.vue: 项⽬⼊⼝⽂件，我们也可以直接将组件写这⾥，⽽不使⽤components ⽬录。main.js: 项⽬的核⼼⽂件。

代码详解

Main.js是项⽬的⼊⼝，类似其他语⾔的Main函数，代码如下：Main.js

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: ''//选择⼀个组件去替换index.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默认加载的模块，其代码如下：

这⾥主要是⽤于配置路由视图—— ，其他的样式我们可以暂时忽略。

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

运⾏项⽬

如上图所⽰，我们得到了修改页⾯。到此Vue的基本使⽤已经介绍完了。

总结

到此这篇关于Vue⼊门指导的⽂章就介绍到这了,更多相关Vue⼊门指导内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！