大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

浅谈Vue安装配置及目录解析

一、Vue安装与配置

1.1node.js安装

根据电脑系统,分别安装32位或64位node(node文件夹中安装文件即是)。一直点击下一步即可,安装过程中会默认将node添加到系统变量中。 安装完成后,打开cmd(可通过’win+r’打开运行,在其中输入’cmd’后回车即可),在其中输入’node -v’查看node版本。若输出版本号,即证明安装成功。若出现’node非内部或外部命令’等类似提示信息,查看系统变量中是否添加了node。

1.2Vue-cli 脚手架安装

npm的安装源在国外,所以速度会很慢。可以将npm的安装源修改为淘宝镜像。修改方法为在cmd中输入npm config set registry https://registry.npm.taobao.org’。输入后回车等待即可

修改后即可输入下方代码,安装脚手架。

npm install -g vue-cli

1.3 通过脚手架创建项目

vueinit webpack 项目名

创建项目之前会询问你项目相关信息,信息如下:

? Project name sell //设置项目名称

? Project description sell app //设置项目描述

? Author Martyr //设置作者

? Vue build standalone //使用标准的文件或是压缩过的文件(标准)

? Install vue-router? Yes //是否安装vue-router(路由)

? Use ESLint to lint your code? No //是否使用语法检查器(检查十分严格)

? Pick an ESLint preset Standard //用何种(选择标准即可)

? Set up unit tests NO //是否使用单元测试

? Setup e2e tests with Nightwatch? No //是否使用e2e测试

? Should we run `npm install` for you after the project has been cre

ated? (recommended) npm //是否需要现在通过npm或yarn帮你配置项目,或是稍后你自己动手安装

安装完成后出现运行项目的相关提示:

cd sell //进入cell文件夹

npm start //运行项目

下一步我们只需要输入cd sell(sell为项目名,输入你自己创建时的项目名即可),进入项目文件后输入npm start即可。

注意:输入‘npmstart’后,会弹出vue的欢迎页面(若未弹出,则可以手动在浏览器中localhost:8080

二、Vue项目目录详解

2.1目录结构

通过vue-cli初始化项目后,目录结构如下:


在src文件夹下,我们可以看到main.js(页面入口js文件),App.vue(页面级vue组件),以及components(组件目录)文件夹下的Helloworld.vue这三个文件夹

.main.js:

import Vue from 'vue'

import App from './App'

import router from './router'


Vue.config.productionTip = false


new Vue({

el: '#app',

router,

template: '',

components: { App }

})

main.js中,1~3行通过import来引入所需要的组件。其中Vue是我们写Vue代码所必须的组件,其中包含了Vue.js中我们所需的各种内容。第二行的App则是我们自己写的组件,也就是我们从App.js中导出的组件。至于第三行的router,则是我们的跳转页面的路由。我们稍后的内容里会介绍路由的使用。


APP.vue:

<template>

<div id="app">

<img src="./assets/logo.png">

<router-view>

</div>

</temlate>

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

App.vue中所写的代码就是我们自己编写的组件了。

一个vue组件,主要的构成有三个部分,分别是template,script,style。这三个标签里:

template标签里写html代码,且template直接子级只能有一个标签(有什么内容)。此处标签为路由的标签。

style标签里写CSS样式(内容长什么样),

script里面写Javascript代码(有什么功能)。

至于HelloWorld.vue也是我们自己编写的组件。就不做赘述了。

2.2路由制作

用Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,路由决定了页面的跳转。当你要把vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

你可以简单的理解成,在vue-router中共有两种标签,它们分别是:

<router-link tag="div" to="/weather"></router-link>

router-link 组件,用来导航。

标签中的tag属性作用是设置该router-link 组件在页面中被渲染成什么标签。

标签中的to属性作用是设置该router-link 组件在页面中导航至哪里。

<router-view></router-view>

路由匹配到的组件将渲染在这里