果莫果莫诺-vue

前端工程仓库地址

jsd2203-csmall-web-client: 这是一个学习Vue CLI的工程

Vue流程

默认显示  public中的index.html(div id="app",同时默认生效main.js)   
main.js中import App from '/.App.Vue'  =>显示App.vue界面
而App.vue中是<router-view/>   =>找router下的路由配置index.js
index.js中 /为HomeView 就找到import HomeView from '../views/HomeView.vue'
HomeView.vue中用到    <HelloWorld msg="Welcome to Your Vue.js App"/>
又找到competent文件夹中的HelloWorld.vue页面
6.24   下午98-99

elementui不能用时
1.检查package.json中的dependencies中有无element-ui
2.main.js中有无三行配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
3.删除node_modules,然后在终端中执行npm install命令

创建Vue CLI工程

步骤1：下载并安装Node.js

下载并安装Node.js，下载完成后，打开新的CMD/终端窗口，输入以下命令：

npm -v

执行后，会提示版本号，则表示安装成功。

步骤2：配置npm源

在CMD/终端窗口中输入：

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

执行后，不会有反馈。

npm get registry

以上命令用于配置npm源，则后续的下载软件都将从所配置的源服务器下载。

步骤3：安装vue/cli

在CMD/终端窗口中输入：

npm install -g @vue/cli

执行后，会自动下载一些软件，在CMD/终端窗口中也会有许多信息，只要没有出现Error级别的错误，均可无视。

到此为止的所有操作，在每台电脑上，都是一次性操作。

步骤4：创建工程

（以下示例将把项目创建在F:\Vue-Workspace，此盘和文件夹名均可自行指定）

打开电脑中的文件夹窗口，找到F盘，新建名为Vue-Workspace的文件夹，然后，在CMD/终端窗口中输入：

f:

执行后，再输入：

cd f:\Vue-Workspace

再执行后，命令提示符应该是F:\Vue-Workspace，此时，再创建Vue CLI项目，则项目会出现在此文件夹中。

在CMD/终端窗口中输入：

vue create jsd2203-csmall-web-client

输入完成后，按1次回车（按下后会卡顿一会，请等待），在接下来的提示中，选择Manually choose featuers，再选择Babel、Router、Vuex，再选择Vue的版本为2.x，出现Y/n的选项时，直接回车即可，然后选择In package.json，最后的y/N选择也直接回车即可。

接下来，会自动完成创建过程，出现Successfully created project jsd2203-csmall-web-client.提示即表示成功。

启动Vue CLI工程

在CMD/终端窗口中，首先，确保当前位置存在package.json文件，此文件是项目的根目录下的文件，所以，输入命令之前的提示符应该是：

F:\Vue-Workspace\jsd2203-csmall-web-client>

在此提示符下，输入启动项目的命令：

npm run serve

执行以上命令后，会自动编译并启动此工程，在启动过程中，将看到Compiled successfully in 2155ms提示，则表示启动成功。

启动成功的提示中还包括http://localhost:8080这样的网址，通过此网址即可访问此工程的运行效果（不同网络配置的电脑，提示的网址可能数量不同）。

在浏览器中输入以上网址，即可访问。

停止已启动的项目

在CMD/终端窗口中，按下Ctrl + C即可停止已启动的项目。

（按下Ctrl + C时即已停止，所以，在弹出的提示中，无论选择Y或N都是等效的）

关于Vue CLI工程结构

• [.idea]：是IntelliJ IDEA管理项目时自动生成的，可以无视
• [node_modules]：是当前项目所需的依赖项，不应该自行维护，注意：通常此文件夹不会提交到git，在得到git上的项目后，如果没有此文件夹，需要先执行npm install命令才可以
• [public]：是当前项目启动后的根路径，可存放各种资源，例如.css文件、.js文件、图片文件等，如果在此文件夹下粘贴1.jpg，则可以通过`http://localhost:8080/1.jpg`查看到此文件，并且，还可以按需自行创建文件夹，则路径上也应该有文件名称
  • favicon.ico：项目的图标文件，每个项目在（编译后的）根目录下有此文件时，会在浏览器中显示此图标
  • index.html：当前项目的页面，在Vue CLI工程，将有且仅有这1个HTML页面
• [src]
  • [assets]：资源文件夹，用于存放静态资源，通常包括.css文件、.js文件、图片文件等，需要注意，此处的文件都应该是不随着程序运行过程变化而发生变化的文件，例如logo.png在此处是正确的，但是，用户的“头像”则不应该放在此处
  • [components]：用于存放视图组件，且这些视图组件通常是被其它视图组件调用的，是可能复用的组件，并且，在不同的调用中，传入的参数可能不同
  • [router]
    • index.js：路由配置文件，主要配置访问路径与视图组件的对应关系
  • [store]
    • index.js：存储共享的量的文件
  • [views]：用于存放视图组件
  • App.vue：是index.html默认加载的视图文件
  • main.js：是当前项目的主JS文件，通常用于管理一些配置，例如添加了某些依赖项（例如Element UI）后，可能需要在此处导入，才可以使得各.vue文件中可以使用这些依赖项
• .gitignore：用于配置哪些文件和文件夹不会提交到git，如果此项目不需要提交到git，则不需要此文件
• babel.config.js：是Babel的配置文件，通常不关心，也不要修改
• jsconfig.js：是js一些通常配置的文件，通常不关心，也不要修改
• LICENSE：许可协议文件，默认的项目中通常没有此文件，在git上公开的项目通常都包含此文件
• package.json：主要配置当前项目的依赖项与项目的编译打包等配置，通常不建议手动修改
• package-lock.json：是自动管理的配置文件，通常不建议手动修改
• README.md：当前项目的说明文件，如果此项目已提交到git，通常会显示在git的此项目的主页，通常，应该在此文件中对当前项目进行必要描述，例如：如何配置此项目、如何启动此项目、相关的注意事项等
• vue.config.js：是Vue配置的文件，通常不关心，也不要修改

关于.vue文件

通常，.vue文件的源代码可以由3大部分组成：页面设计、样式、脚本，分别使用<template>、<style>、<script>节点。

关于<template>标签，其直接子标签必须有且仅有1个！

这3大部分并不全部都是必须的，例如某个.vue中没有<script>也是完全正常的！

在<template>的某个层级的子级，如果出现了<router-view />，表示此区域将由另一个视图文件来负责设计，至于是哪个视图，取决于router/index.js中的路由配置。

关于路由的简单配置

在router下的index.js文件是用于配置路由的，在此文件中有一个routes常量，其属性值是一个对象的数组，例如：

import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

数组元素中，通常具有3个属性：

• path：路径，必须唯一
• name：自定义名称，可以不必配置此属性
• component：路径对应的视图组件（某个.vue文件加载得到的对象），有2种加载方式，第1种是在当前文件的起始位置（顶部）通过import语法静态导入（默认导入），第2种做法是在此component属性值位置使用箭头函数结合import函数进行导入，通常，在每个项目中，静态导入的视图组件应该只有1个

以上重点关注path和component的配置，当显示的视图组件中使用到了<router-view />时，将根据当前访问的URL（浏览器中的路径）来决定显示哪个视图。

使用Element UI

在CMD/终端窗口中，确保在当前项目的文件夹位置，执行安装Element Ui的命令：

npm i element-ui -S

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

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

以上操作是每个项目中做1次的操作。

接下来，在当前项目的任何.vue文件中都可以直接使用Element UI进行设计。

使用Axios

在CMD/终端窗口中，确保在当前项目的文件夹位置，执行安装axios的命令：

npm i axios -S

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

import axios from 'axios'
Vue.prototype.axios = axios

以上操作是每个项目中做1次的操作。

接下来，在当前项目的任何.vue文件中都可以直接使用axios进行网络访问。

需要注意，目标服务器可能是禁止跨域访问的（错误提示中有CORS字样），在Spring Boot工程中，可以使得启动项目的类实现WebMvcConfigurer接口，并在此类中添加以下代码：

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOriginPatterns("*")
            .allowedMethods("*")
            .allowedHeaders("*")
            .allowCredentials(true)
            .maxAge(3600);
}

例如：

使用Axios发请求的代码示例：

let url = 'http://localhost:8080/login';
  console.log('url >>> ' + url);
  let data = {
    'username': this.ruleForm.username,
    'password': this.ruleForm.password
  };
  console.log('data >>> ');
  console.log(data);
  this.axios.post(url, data).then((response) => {
    console.log(response.data);
  }).catch(function(error) {
    console.log('响应结果为失败！');
  })

当日小结

你应该可以：

• 根据笔记和课上代码，创建出新的项目
• 了解Vue CLI项目的目录结构
• 掌握.vue文件的写法
• 掌握在router\index.js中配置新的页面与路径
• 掌握在新项目中安装并配置ElementUI与axios
• 当疑似依赖项错误时，删除node_modules文件夹，并执行npm install，再执行你需要执行操作