VUE脚手架项目 node.js项目创建与结构及使用

1.准备工作

Node.js安装包

下载地址可参考： https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi https://mirrors.nju.edu.cn/nodejs/latest-v16.x/node-v16.14.2-x64.msi https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node-v16.14.2-x64.msi

Node.js的安装过程没有特别的注意事项，整个安装过程中都可以不必修改任何内容，直至其自动安装 完成

npm -v

此安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用，在操作系统的命令提示符下执 行以下命令即可，执行以上命令后，将显示版本号

配置npm源

配置npm源的命令如下：

npm config set registry https://registry.npmmirror.com

当配置成功后，可通过 get 命令可查看npm源：

npm config get registry

注意：以上命令将显示当前生效的npm源，但并不检查npm源的URL是否有效，所以，即使配置了错误 的npm源，也不会提示错误，请认真检查是否配置了正确的URL。

安装VUE Cli

安装VUE Cli的命令如下：

npm install -g @vue/cli

只要没有出现 ERROR 字样，均可无视

安装完成后，可通过以下命令检验VUE Cli是否安装成功：

vue -V

注意：以上命令中的 -V 中的 V 是大写的。 执行以上命令后，将显示当前的VUE Cli版本号

创建工程

# 切换到D盘 d:

mkdir Vue-Workspace

# 进入D盘下的Vue-Workspace

cd Vue-Workspace

当进入Vue Workspace后，就可以创建工程了。 使用 vue create 命令即可创建VUE CLI工程，命令格式是：

vue create 工程名称

输入以上指令后，按下 Enter 键将准备创建工程，创建过程可能耗时较长，注意：不可反复按 Enter 键，否则会自动选择后续各设置选项的默认项

最先提示的选项是 Please pick a preset ，表示“请选择一个预设项”，推 荐选择 Manually select features ，表示“手动选择”，通过键盘的上下箭头进行选择，选择到目标项 后按下键盘的 Enter 键到下一步

Check the features needed for your project ，表示“选择你的工程中需要使用 的功能”，推荐在列表中选择 Babel 、 Router 、 Vuex 这3项，使用键盘的上下箭头移动，使用空格选 中或取消选中，选择完成后按下键盘的 Enter 键到下一步

接下来的选项是 Choose a version of Vue.js that you want to start the project with ，表 示“选择你的工程中希望使用的Vue.js的版本”，推荐选择 2.x 这项，选择到目标项后按下键盘的 Enter 键到下一步

接下来的选项是 Use history mode for router ，表示“是否在路由中选择历史模式”，推荐选择 “是”，输入 Y 后按下键盘的 Enter 键到下一步（提示信息中， Y 是大写的，表示它是默认选项，不输入 Y 而直接按下 Enter 键是等效的）

接下来的选项是 Where do you prefer placing config for Babel, ESLint, etc.? ，表示“你习 惯把一些配置信息存放在哪里？”，推荐选择 In package.json ，即存放在 package.json 文件中，选 择到目标项后按下键盘的 Enter 键到下一步

最后的选项是 Save this as a preset for future projects? ，表示“是否保存以上配置信息，作 为后续将创建的新工程的预设？”，推荐选择“否”，输入 N 后按下键盘的 Enter 键

如果未出现 Error 字样，通常是创建成功了

使用IntelliJ IDEA或类似的开发工具来打开你的项目，并使用内置的 Terminal执行各个命令

npm run serve

命令即可启动此工程的服务（过程中会编译打包此工程）

如果需要停止服务，在控制台使用

Ctrl + C

Vue脚本架工程启动的服务支持热部署（热更新，即：当保存对源代码的修改后，会自动重新编译打包 并覆盖原本已经启动的服务中的文件），并没有重启服务的做法，如果在某些场景中需要实现“重启”的 效果（例如修改服务端口等），可以先停止服务，然后再次启动服务

2.介绍

VUE脚手架项目是一个“单页面”应用，即整个项目中只有1个网页！

在VUE脚手架项目中，主要是设计各个“视图组件”，它们都是整个网页中某个部分，通过显示不同的若干个视图组件，以达到显示不同“页面”的效果！

package.json文件（此文件是创建项目中选择的配置文件），在此文件中的scripts属性下，修改serve属性的值，在原有值后追加--port 新的端口号，再次启动项目，将可以看到此项目启动在9000端口

3.VUE脚手架的项目结构

• [.idea]：任何使用IntelliJ IDEA打开过的项目都会有此文件夹，是由IntelliJ IDEA自动生成的，记录了IntelliJ IDEA管理此项目时用到的文件，如果此文件夹如现错误，删除即可，后续会自动再次生成

• [node_modules]：当前项目使用到的依赖项的文件夹，不要手动管理此文件夹中的内容，如果项目中缺失此文件夹，或此文件夹中的部分必要内容，项目将无法启动，或无法正确运行，需要在终端窗口中，在当前项目文件夹下执行npm install命令，将自动下载当前项目所需的所有依赖项到此文件夹中

  • 此文件夹通常被配置到.gitignore文件中，所以，使用GIT仓库时，提交代码时此文件夹是不会提交的！同理，从GIT仓库拉取项目到本地时，拉取到的项目也不会包含此文件夹

• [public]：静态资源文件夹，用于存放静态资源文件（例如.css、.js、图片等），此文件夹也是整个项目的资源根目录，此文件夹中的内容通过URL的 / 根路径来访问

  • favicon.ico：图标文件，是固定的文件名，如果你希望使用其它图标，可以使用新图标文件覆盖此文件（仍使用相同的文件名）
  • index.html：VUE脚手架项目中的唯一的网页文件，通常，不修改默认文件中的内容

• [src]：项目的核心源代码文件所在的文件夹

  • [assets]：静态资源文件夹，此文件夹下的内容被使用时应该是相对固定的，不会随着程序的运行而发生变化的，例如你可以把网站的LOGO图片文件放在这里，但不应该把用户的头像图片放在这里
  • [components]：用于存放被其它视图组件调用的视图组件的文件夹
  • [router]：用于配置路由
    • index.js：默认的路由配置文件
  • [store]：用于配置全局的一些量
    • index.js：默认的配置全局的量的文件
  • [views]：用于存放视图组件的文件夹
  • App.vue：是默认会注入到index.html的视图组件，不要修改此文件的文件名
  • main.js：项目的主配置文件，通常，在安装了某些新的依赖项后，可能需要在此文件中添加一些配置

• .gitignore：用于配置将哪些文件或文件夹忽略，不会提交到GIT仓库

• bable.config.js：Bable的配置文件

• jsconfig.json：JavaScript的基础配置文件

• LICENSE：并不是VUE脚手架项目的必要文件，此文件是开源声明文件，当你的项目提交到GIT仓库并且设置为公开项目时，需要添加此文件

• package.json：此项目的配置文件，主要配置了执行脚本（scripts属性）、项目的依赖项（dependencies属性）、开发时所需的依赖项（devDependencies属性），在不熟练的情况下，不要手动修改此文件中的内容

• package-lock.json：是管理此项目时使用的、基于package.json自动生成的文件

• README.md：是默认的项目的介绍文件，当你的项目提交到GIT仓库，大部分GIT仓库服务器都会你的项目的首页显示此文件的内容，当你需要编写此文件时，应该明确写出：此项目应该如何打开、如果启动、如果部署，及相关的注意事项等

• vue.config.js：Vue的基础配置文件

推荐在IntelliJ IDEA中安装Vue.js插件，在编写视图组件的源代码时，可以得到更好的编码体验

视图组件主要由3大部分组成，对应3个根级标签：

• <template>：用于设计页面的元素，其子级可以编写设计页面的相关代码，例如HTML源代码，或使用了VUE后的一些标签，或添加了Element UI后，也可以使用Element UI的标签，需要注意：此标签的直接子标签只能有1个
• <style>：用于设计样式，即编写CSS相关代码
• <script>：用于编写程序代码，即编写JavaScript相关代码

4.VUE脚手架项目路由

路由的配置中，routes是通过const声明的，所以是一个常量，并且，其数据类型是一个对象的数组，数组的每个元素都是一个“路由”对象。

每个“路由”对象至少需要配置path和component这2个属性，path是路径，component是视图组件，默认的配置中，name属性是可以不配置的

关于component的配置，有2种做法

使用import语句来导入

通过import()函数导入

5.安装Element UI

npm i element-ui -S

S是大写的！ 

安装完成后，还必须在main.js中添加配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

拉取别人的项目时，需要项目文件夹下执行npm install命令 

6.VUE脚手架项目嵌套路由

在配置路由（配置/src/router/index.js）时，如果配置的路由对象是routes常量的直接数组元素，则此路由配置的视图会显示在App.vue的<router-view/>中。

在设计视图时，可能会出现<router-view/>的嵌套

菜单所在的视图HomeView.vue是显示在App.vue的<router-view/>中的，而HomeView本身也使用了<router-view/>使得页面的主要区域由其它视图组件来显示

一旦出现了<router-view/>的嵌套，在配置子级<router-view/>的显示的视图组件时，就需要配置嵌套路由！子级路由的配置，需要在父级路由对象上添加children的属性

配置了children的视图组件都是使用了<router-view/>的，也就说明这个视图组件是不完整的（某些区域需要使用其它视图组件来显示）！这种视图组件应该不允许直接显示，所以，还应该在此视图组件的路由配置上添加redirect属性，表示“重定向”，即：访问此视图组件时，直接重定向（可以理解为：跳转页面）到另一个视图组件

{
    path: '/',
    component: HomeView,
    redirect:'/sys-admin/index',
    children:[
      {
        path: '/sys-admin/index',
        component: () => import( '../views/sys-admin/SystemAdminIndex.vue')
      },
      {
        path: '/views/sys-admin/temp/album/add-new',
        component: () => import('../views/sys-admin/temp/AlbumAddNewView.vue')
      },
      {
        path: '/views/sys-admin/temp/album/list',
        component: () => import('../views/sys-admin/temp/AlbumListView.vue')
      }
    ]
  },

7.菜单与路由

使用Element UI的菜单时，应该在每个<el-menu-item>上配置index属性，且属性值就是此菜单项对应的视图的URL

然后，在<el-menu>标签上，添加router属性，即可实现根据index跳转URL

如果手动修改浏览器的地址栏中的URL（包括刷新页面），视图的显示一般是没有问题的，但是，默认激活的菜单项可能不是你想要的！

在<el-menu>标签上，有default-active属性，表示默认激活的菜单项，应该将此属性配置为当前显示的视图的URL

            <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              background-color="#222c32"
              text-color="#fff"
              active-text-color="#fff">

            <el-menu-item index="/sys-admin/index">
              <i class="el-icon-s-home"></i>
              首页
            </el-menu-item>

8.安装axios

npm i axios -S

安装完成后，需要在main.js中添加配置：

import axios from 'axios';

Vue.prototype.axios = axios;

 9.qs框架

在前端项目中，可以使用qs框架轻松的将对象转换成FormData格式的字符串。

npm i qs -S

然后，在main.js中添加配置：

import qs from 'qs';

Vue.prototype.qs = qs;

 10.前端程序中的this

this关键字指的就是Vue对象，需要通过this关键字调用的有：

• 在main.js中，通过Vue.prototype.xxx声明的属性，需要通过this.xxx进行调用
  • 例如项目中使用的this.axios、this.qs等
• 在JavaScript程序中，通过export default {}中的data()的return {}中声明的属性
  • 例如项目中使用的this.ruleForm等
• 在JavaScript程序中，通过export default {}中的methods属性中声明的函数
  • 例如项目中使用的this.resetForm(formName);等
• 其它的固定用法，通常是由VUE或某些特定框架注册到Vue对象中的属性
  • 例如项目中使用到的this.$message.error(responseBody.message);