VueJS +NodeJS全栈开发实战教程(二):搭建Vue.js项目

tiger

前端

这里开始,我们就进入真正的实践了。利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 Vue 的特性的。这点在接下来的内容中我们可以慢慢感受。
在动手操作之前,我希望大家已经清楚什么是 “前后端分离” ,什么是 “单页面应用” 。

简单地说,前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互,而 单页面应用(single page web application,SPA),就是只有一张页面,并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

一、安装 Vue CLI

1.安装NodeJS

因为需要使用 npm 安装 Vue CLI,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/,首页即可下载。
image.png

图中左边是长期支持版本,右边是当前版本,下载哪个都行,我一般选择长期支持版本。

下载完成后运行安装包,一路下一步就行。然后在 cmd 中输入node -v,检查是否安装成功。
image.png

如图,出现了版本号(根据下载时候的版本确定),说明已经安装成功了。同时,npm 包也已经安装成功,可以输入npm -v查看版本号
image.png

输入npm -g install npm,将 npm 更新至最新版本。
image.png

npm自带的源是国外源,下载很慢。我们要切换国内源

npm config set registry https://registry.npm.taobao.org

安装nrm(快速切换NPM源)

npm install -g nrm

列出可选的源

nrm ls

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - http://registry.npm.taobao.org/
  eu ----- http://registry.npmjs.eu/
  au ----- http://registry.npmjs.org.au/
  sl ----- http://npm.strongloop.com/
  nj ----- https://registry.nodejitsu.com/

切换源

nrm use taobao

2.安装脚手架

npm install -g @vue/cli

输入检查是否安装成功

vue -V

二、构建前端项目

笔者用VSCode 其他编译器或者CDM一样可以。

安装

vue create admin 

会弹出让你选预装插件的选项,一般我选default

image.png
安装成功后

cd admin
npm run serve

然后打开
http://localhost:8080
看到如下页面即时构建成功
image.png

三、Vue 项目结构分析

1.预览结构

image.png

2.public文件夹下的index.html

代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

就是一个普普通通的 html 文件,让它不平凡的是 <div id="app"></div> ,下面有一行注释,构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是,整个项目只有这一个 html 文件,所以这是一个 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。

3.App.vue

我把这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。

.vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。先看它的初始代码

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

大家可能注意到了,这里也有一句 <div id="app">,但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

<script>标签里的内容即该组件的脚本,也就是 js 代码,export default 是 ES6 的语法,意思是将这个组件整体导出,之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

这个文件最关键的一点其实是第四行, <router-view/>,是一个容器,名字叫“路由视图”,意思是当前路由( URL)指向的内容将显示在这个容器中。也就是说,其它的组件即使拥有自己的路由(URL,需要在 router 文件夹的 index.js 文件里定义),也只不过表面上是一个单独的页面,实际上只是在根组件 App.vue 中。

4.main.js

前面我们说 App.vue 里的<div id="app">和 index.html 里的<div id="app">没有关系,那么这两个文件是怎么建立联系的呢?让我们来看入口文件 main.js 的代码
新版本vue的代码(第三行只有 vue add router后才会有 因为我一开始选的插件没有router)

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

旧版本的

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

这里插一嘴,这个 js 文件有的同学可能看着不顺眼,比如没有分号(;),因为是 ES6 的语法,不这么写反而会提示错误,虽说可以把 es-lint 改了或者关了,但我想熟悉一下新的规则也挺好。

最上面 import 了几个模块,其中 vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。

Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由。components 表示该对象包含的 Vue 组件,template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签。

看完了以上三个文件,我想基本上就对前端项目的结构有所了解了。

上一篇:VueJS +NodeJS全栈开发实战教程(一)
下一篇:

阅读 11.1k
46 声望
5 粉丝
0 条评论
46 声望
5 粉丝
文章目录
宣传栏