前台（前端、后端）、后台

前台特指HTML、css、js开发的页面
后台特指java或者其他计算机语言开发的读写数据库的接口服务
前端（页面：样式、布局等）和后端（服务：页面之间跳转，通信等）都属于前台
vue-cli就是前端后端
nodejs就是后端，提供服务的，为了页面之间能够正常的、高效的、有效的进行跳转；进行变量共享互相访问而产生的服务。vue是前端框架。

nodejs安装

nodejs安装：https://www.nodejs.cn。nodejs是一个基于Chrome V8引擎的JavaScript运行环境。

  • 点击安装包一路下一步
  • 配置环境变量

  • node -v 、npm -v检查安装是否成功，成功会显示版本号

    常用的dos命令

    cd 打开文件夹
    md/mkdir 新建文件夹
    dir 查看文件夹内容
    cd ..返回上一级文件夹
    盘符： 进入对应盘，比如d:进入D盘

    npm安装以及参数设置（1）

    npm和cnpm之间的区别

  • npm(node package manager)是nodejs的包管理器，用于node的插件管理（包括安装、卸载、管理依赖等）

  • cnpm因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队分享了使用国内镜像来代替国外服务器
  • 除了默认获取资源的位置不同，所有的参数，所有的功能都是相同的

-g参数

  • 全局安装（global），可以在命令行下直接使用
  • 可以通过npm root -g查看全局安装的文件夹位置
  • 位置灵活，需要注意前后空格 ，比如 npm install -g vue-cli 或者 npm install vue-cli -g

npm install -g cnpm —registry=http://registry.npm.taobao.org
全局安装vue-cli
npm install -g vue-cli
cnpm install -g vue-cli
手动指定从哪个镜像服务器获取资源

  1. npm install -gd express —registry=http://registry.npm.taobao.org，缺点每次安装的时候都要加上 —registry参数（指定获取资源服务器），可以通过执行npm config set rehgistry http://registry.npm.taobao.org永久设置npm的下载源
  2. 使用cnpm获取资源，执行npm install -g cnpm —registry=http://registry.npm.taobao.org下载cnpm
    npm安装以及参数设置（2）
    -S、-D参数
  • -S、—save安装包信息将加入到dependencies(生产阶段使用的依赖)
  • -D、—save—dev安装包信息将加入到devDependencies(开发阶段和生产阶段都会使用的依赖)，所以开发阶段一般使用它
  • i是install的缩写(注意：前面没有“-”)
  • -s、-d、-save-dev、-save—dev、—save-dev、—save —dev写法比较灵活都是可以的
  • d可以和g靠在一起，比如npm i -gD vue-cli(标准)或者npm i -gd vue-cli 等同于npm i -g -d/-D vue-cli
  • 安装本地依赖要确保当前文件夹中有初始化配置文件package.json，使用npm init -f或者npm init -y快速初始化
    cnpm和vue-cli2安装
    npm的默认下载地址是国外，cnpm默认下载的地址是淘宝镜像。npm install -g cnpm —registry=http://registry.npm.taobao.org下载cnpm。cnpm -v检查是否安装成功
    vue-cli安装：npm i -g vue-cli或者cnpm i -g vue-cli
    安装成功之后，可以执行vue -V检查是否安装成功（注意V大写）
    创建vue-cli2项目
    vue init webpack projectName //以webpack为模板创建项目名为projectName的前端项目
  1. 创建vue-cli项目过程中部分配置内容
  • Install vue-router?(Y/n)是否安装vue-router,这是官方路由，大多数情况下都使用，这里输入Y回车即可
  • Use ESLine to lint your code?(Y/n)是否使用ESLine管理代码，ESLine是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用
  • 卸载@vue/cli@4.5.3不成功问题，npm config ls -l查看本地的npm配置userconfig对应的路径，删除.npmrc配置文件，where vue查看vue所在路径，并删除相关文件。重新安装（清除本机4.5.3版本遇到问题记录），重新安装npm i -g vue-cli@2.9.6 ```bash C:\Users\Sunbean>npm config ls -l ; “default” config from default values

_auth = (protected) access = null all = false allow-same-version = false also = null audit = true audit-level = null auth-type = “legacy” before = null bin-links = true browser = null ca = null cache = “C:\Users\Sunbean\AppData\Local\npm-cache” cache-max = null cache-min = 0 cafile = null call = “” cert = null ci-name = null cidr = null color = true commit-hooks = true depth = null description = true dev = false diff = [] diff-dst-prefix = “b/“ diff-ignore-all-space = false diff-name-only = false diff-no-prefix = false diff-src-prefix = “a/“ diff-text = false diff-unified = 3 dry-run = false editor = “notepad.exe” engine-strict = false fetch-retries = 2 fetch-retry-factor = 10 fetch-retry-maxtimeout = 60000 fetch-retry-mintimeout = 10000 fetch-timeout = 300000 force = false foreground-scripts = false format-package-lock = true fund = true git = “git” git-tag-version = true global = false global-style = false globalconfig = “D:\nodejs\etc\npmrc” heading = “npm” ; https-proxy = null ; overridden by user if-present = false ignore-scripts = false include = [] include-staged = false include-workspace-root = false init-author-email = “” init-author-name = “” init-author-url = “” init-license = “ISC” init-module = “C:\Users\Sunbean\.npm-init.js” init-version = “1.0.0” init.author.email = “” init.author.name = “” init.author.url = “” init.license = “ISC” init.module = “C:\Users\Sunbean\.npm-init.js” init.version = “1.0.0” json = false key = null legacy-bundling = false legacy-peer-deps = false link = false local-address = null location = “user” lockfile-version = null loglevel = “notice” logs-max = 10 ; long = false ; overridden by cli maxsockets = 15 message = “%s” metrics-registry = “https://registry.npmjs.org/“ node-options = null node-version = “v14.19.1” noproxy = [“”] npm-version = “8.5.2” offline = false omit = [] only = null optional = null otp = null pack-destination = “.” package = [] package-lock = true package-lock-only = false parseable = false prefer-offline = false prefer-online = false prefix = “D:\nodejs” preid = “” production = null progress = true ; proxy = null ; overridden by user read-only = false rebuild-bundle = true ; registry = “https://registry.npmjs.org/“ ; overridden by user save = true save-bundle = false save-dev = false save-exact = false save-optional = false save-peer = false save-prefix = “^” save-prod = false scope = “” script-shell = null searchexclude = “” searchlimit = 20 searchopts = “” searchstaleness = 900 shell = “C:\WINDOWS\system32\cmd.exe” shrinkwrap = true sign-git-commit = false sign-git-tag = false sso-poll-frequency = 500 sso-type = “oauth” strict-peer-deps = false strict-ssl = true tag = “latest” tag-version-prefix = “v” timing = false tmp = “C:\Users\Sunbean\AppData\Local\Temp” umask = 0 unicode = false update-notifier = true usage = false user-agent = “npm/{npm-version} node/{node-version} {platform} {arch} workspaces/{workspaces} {ci}” userconfig = “C:\Users\Sunbean\.npmrc” version = false versions = false viewer = “browser” which = null workspace = [] workspaces = null yes = null

; “user” config from C:\Users\Sunbean.npmrc

//registry.npmjs.org/:_authToken = (protected) home = “https://www.npmjs.org“ https-proxy = null proxy = null registey = “http://registry.cnpmjs.org/“ registry = “https://registry.npmjs.org/“

; “cli” config from command line options

long = true

C:\Users\Sunbean>where vue C:\Users\Sunbean\AppData\Roaming\npm\vue C:\Users\Sunbean\AppData\Roaming\npm\vue.cmd

  1. <a name="dmP6Q"></a>
  2. ##### 更改vue-cli2的helloworld（略）
  3. 创建first.vue文件，更换helloworld.vue的配置路由
  4. <a name="ziTNO"></a>
  5. ##### 配置语法高亮显示（Sublime Text开发工具）
  7. 1. 插件地址：https://github.com/vuejs/vue-syntax-highlight
  8. 1. download下载下来
  9. 1. 文件解压
  10. 1. ctrl A,ctrl C拷贝所有文件
  11. 1. 在sublime text工具，点击工具栏的preferences--> Browse Packages --> 创建文件夹vue --> 将复制的文件ctrl V
  12. 1. 切换到sublime text ,快捷键ctrl shift P打开插件配置界面，搜索vue,选择Set Syntax:Vue Component,双击之后完成配置
  13. <a name="Olp01"></a>
  14. ##### router实现页面跳转
  15. ```vue
  16. <router-link to="/">返回</router-link>
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import First from '@/components/first'
  4. import A from '@/components/a'
  5. import B from '@/components/b'
  7. Vue.use(Router)
  9. export default new Router({
  10.   routes: [
  11.     {
  12.       path: '/',
  13.       name: 'First',
  14.       component: First
  15.     },
  16.     {
  17.       path: '/a',
  18.       name: 'A',
  19.       component: A
  20.     },
  21.     {
  22.       path: '/b',
  23.       name: 'B',
  24.       component: B
  25.     }
  26.   ]
  27. })

router实现子路由（1）
  1. <!-- 将子路由挂在到父路由对应的页面里 -->
  2. <router-view></router-view>
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import First from '@/components/first'
  4. import A from '@/components/a'
  5. import B from '@/components/b'
  6. import A1 from '@/components/a1'
  8. Vue.use(Router)
  10. export default new Router({
  11.   routes: [
  12.     {
  13.       path: '/',
  14.       name: 'First',
  15.       component: First
  16.     },
  17.     {
  18.       path: '/a',
  19.       name: 'A',
  20.       component: A,
  21.       children: [
  22.         {
  23.           path: '/a1',
  24.           name: 'A1',
  25.           component: A1
  26.         }
  27.       ]
  28.     },
  29.     {
  30.       path: '/b',
  31.       name: 'B',
  32.       component: B
  33.     }
  34.   ]
  35. })

router实现子路由（2）

子路由、非子路由的区别：子路由是通过组件挂载在父页面里面的，因此在切换路由时，会显示父页面的内容。非子路由在路由切换时，是重新打开一个页面，不使用组件挂载，不会显示父页面内容。

为什么不用＃号

  • 地址栏中，经常出现#，是什么作用，能不能去掉#？

    1. http://localhost:8080/#/

  • hash模式：地址栏包含#符号，#以后的不能被后台获取

初衷，是减少后台访问次数。当浏览器的地址栏不发生变化（#后面的内容不管怎么变化，都不会被HTTP获取到。所以地址栏相当于没有发生变化），浏览器是不会发送请求到后台，这样可以减少访问后台（访问数据库）的次数。

  • history模式：具有对url历史记录进行修改的功能（H5里面的新功能）

首先，也是为了减少对后台的访问次数，使得HTTP不会重复的反复的对后台发出请求。（history模式也可以实现减少网络请求）
问题：页面刷新的时候，页面不存在的时候，页面就会出现404。#不会出错最多就是不会发生任何变化。

  • 在微信支付、分享url作为参数传递时，#号不能满足需求
  • history需要后台配合，处理404的问题

为什么不用#号？因为#号是一个特殊字符，在很多场合不被满足。

单独安装eslint

基于webpack模板创建项目的语法是：vue init webpack prog1
npm install eslint —save安装到生产环境中
npm install eslint —save-dev安装到开发环境中（开发环境更多是在编辑的时候需要，此处需要说明一下安装到开发环境指令需要是—save-dev都添加，如果单独加一个—dev实际也是安装到生产环境，现阶段可以理解为凡是开发环境中安装的依赖在生产环境中也可以使用）

导入其它项目添加依赖并运行

cd 项目所在路径（到项目根目录的位置）
npm install
npm run dev

居中怎么实现的（主组件的样式设置）

App.vue是作为主组件存在的，路由中的内容称之为子组件。默认挂载根路由”/“