一文教你正确的使用Vue框架

一文教你正确的使用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窗口中直接使用了，不然还需要重新配置环境变量，添加当前下载目录。

下载完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，得到窗体如下：

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

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

学习项目

刚刚安装的VSCode需要禁用JS-CS-HTML Formatter插件，不然保存代码时会自动格式化了，然后html代码全乱了通过VisualStudioCode将新建的项目打开。

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

新建项目结构如下图：

结构描述如下表：

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: '<App/>'//选择一个组件去替换index.html 中的<div id="app"></div>。这里使用我们components导入的App组件，相当于指定初始化时的显示组件，Vue组件注册后可以使用<tagName></tagName>的模式来使用组件。
})

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">
 <h3>Kiba518</h3>
 <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)配置在了一个div中，并且还放在了一个H2下面，这样，我们的这个H2标签就永远会在路由视图上面了。

运行项目

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>