vue笔记

nvm：nodejs版本管理器

nvm安装及常用命令

nvm version			   //查看版本
nvm ls				   //查看已安装的nodejs
nvm use 16			   //切换nodejs版本
nvm install 12		   //安装nodejs版本
nvm list available     //显示所有可以下载的版本
nvm install latest     //安装最新版本
nvm uninstall 14.5.0   //卸载到 14.5.0 版本的 node.js
nvm install-latest-npm // 在当前node版本中，将npm升级到最新版
nvm ls-remote          //列出所有远程服务器的版本
18.20.8
12.22.12
11.15.0
10.24.1
nvm alias default 18 // 设置默认版本是18

nvm node_mirror [url]      // 切换node镜像[https://npm.taobao.org/mirrors/node/]
nvm npm_mirror [url]       // 切换npm镜像[https://npm.taobao.org/mirrors/npm/]

nvm安装后找到安装位置将下面的代码放入文件中settings.text中作用：下载其他版本node的时候自动安装对应版本的npm

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

nrm ：npm 源管理器，允许你快速地在 npm 源间切换

常规切换做法

npm config get registry
// v5
npm config set registry http://cdhx78.seeyon.com:5387/

// 国内
npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com

// v8
npm set registry http://39.107.192.235:9082/

nrm add zy http://cdhx78.seeyon.com:5387/
nrm add tb https://registry.npm.taobao.org/

nrm安装及常用命令

npm install -g nrm          //nrm 全局安装
nrm ls					//查看可使用的源
nrm current				//查看当前使用源
nrm use npm				//切换镜像源–切换到 npm 镜像源
nrm add registry 【url】 //增加镜像源
nrm del 【registry】 		//删除对应的源

常用仓库：

https://registry.npmmirror.com 淘宝

http://182.150.22.81:5387 cap4 （废）

http://10.2.5.99:4837 v12.18.2 （废）

http://cdhx78.seeyon.com:5387/ （最新）注：致-远-产-品 node版本不可高于12

npm set registry http://39.107.192.235:9082/ v8的仓库

npm: 常用命令

npm -v
npm install -g npm  ## 更新到最新版本
##清空缓存
npm cache clean --force
npm install

基本常识

常识

1、config下proxy.js的proxySite是所代理的协同地址，changeOrigin: true, 允许跨域

2、config下index.js在build下加productionSourceMap: true,devtool:'source-map', //打包map资源进dis下

3、config下index.js在dev下加cssSourceMap: true,devtool:'source-map', //运行时调试时携带map资源调试

4、main.js引入Vue.config.devtools = true; 可以支持谷歌的vue调试插件

5、调试需要准备：将含有map的包打入环境，启动vue工程，通过代理地址进行调试，f12即可看到map调试资源 / 对应vue资源，热加载的资源只对/根路径生效

6、pc_form构建需要pkg_cap4_pc_ui,component_doc,pkg_condition ，seeyon-ui-ant工程的依赖，分别执行npm install 命令

7、移动端需要执行，npm run build:seeyon，直接构建出来zip移动端包

8、var proxySite = 'http://127.0.0.1'; 可以设置proxy代理协同进行调试

高级调试

调试

webpack 调试：

node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve

node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js build

然后访问：chrome://inspect/#devices

也可以通过vue审查webpack 配置：vue inspect > output.js

vue2与vue3

注意

使用node低于12的时候只能使用vue2

npm install --global vue-cli

npm install -g @vue/cli-init

需要离线下载webpack 包

https://github.com/vuejs-templates/webpack/releases

解压 webpack 压缩包，移动至C:\Users\zmf.vue-templates (若没有 .vue-templates 文件夹需自己新建一个)-这里要放到指定目录中本地： C:\Users\xx.vue-templates

vue init webpack vue2-app

如果高于12，可以使用vue3

npm install -g @vue/cli

vue create my-vue3-project

vue2改造成致远页面，编译后路径形成致远路径

注意

默认vue2初始化后的工程编译后都是绝对路径，如果要改相对路径如下图：

修改项目下config的index.js文件：将build下的assetsPublicPath:'/'改为assetsPublicPath:'./'

修改项目下build文件夹下的utils.js文件，webpack4和之前版本的改法不一样，下面两种都罗列出来：

1）webpack4之前的版本，在ExtractTextPlugin插件配置的地方下加上publicPath:'../../'

2）在webpack4版本中，在options下加上publicPath:'../../'

//手动创建vue.config.js在根目录

在根目录下，创建一个vue.config.js文件（一般创建项目时自带这个文件），添加以下代码：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint语法校验
  lintOnSave: false,
});

当使用 Vue CLI 提供的命令（如 vue-cli-service build）时，Vue CLI 会自动加载并应用 vue.config.js 中的配置。但是，如果您直接运行 node build/build.js，则不会触发 vue.config.js 中的配置,vue.config.js在3中使用，2中也可以使用

vue.config.js常用配置：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // 项目部署的基本路径，默认 '/'
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  // 项目打包的根目录，默认 'dist'
  outputDir: 'dist',
  // 项目打包的静态资源存放目录，默认 '
  assetsDir: '',
  // 项目打包的index.html输出路径，默认 'index.html'
  indexPath: 'index.html',
  // 多页应用配置参数，默认 undefined
  pages: undefined,
  // 开发环境 eslint 异常信息提示位置，默认 'default' 在浏览器窗口提示，为 true 在控制台提示
  lintOnSave: 'default',
  // 项目打包是否生成js的 source map 调试包，默认 true，生产部署设置为false
  productionSourceMap: false,
  // css 配置
  css: {
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中、生产环境下默认 true，开发环境下默认 false
    extract: true,
    // 是否开启 css 的 source map 调试，默认 false
    sourceMap: false,
    // 配置css的loader选项：css-loader、postcss-loader、less-loader、sass-loader，stylus-loader，默认 {}
    loaderOptions: {}
  },
  // devServer 支持 webpack-dev-server 所有选项
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    hot: true,
    https: false,
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API + '/appliction', // 后端服务域名
        secure: false, // 是否支持 https，默认 false
        ws: true, // 是否支持 websocket
        changeOrigin: true, // 是否支持跨域
        pathRewrite: {
          '^/': '/' // 路径片段重写
        }
      }
    }
  },
  // 插件配置选项
  pluginOptions: {
    foo: {
      // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
    }
  },
  // babel-loader 是否处理 node_modules 中的依赖包，处理哪些依赖包，参数类型: boolean | Array<string | RegExp>
  transpileDependencies: true
})

element-ui 使用：

npm i element-ui -s

提示

https://element.eleme.cn/#/zh-CN/component/quickstart

vue2使用axios需要使用1.0以下版本，致远使用^0.18.0

vue别名

注意⚠️

@这是webpack设置的路径别名。

在build/webpack.base.conf这个文件里面定义。

vue项目中默认定义了@（最常用）和vue$两个别名，如果需要，可以自己添加。

默认定义：@这东西代表着到src这个文件夹的路径

~ 是 stylus-loader 的东西，参考 https://github.com/shama/stylus-loader（但是好像不引入这个库，也可以用~）

~是相对于其他路径（文件）的，类似于相对路径

示例：

~@/assets/scss/_variables.scss ==>>表示相对于@（别名，一般是src目录）下的 assets/scss/_variables.scss；

\# 其实就是v-slot的简写形式插槽所使用的指令

<template #header>

     <h1>Here might be a page title</h1>

</template>

解决 IDEA下vue3 + vite @符号无法识别的问题

在项目根目录新建jsconfig.json文件

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}

vscode笔记

配置通过githup同步

Live Server插件，可以本地运行一个小服务启动html

Code Runner插件，可以本地运行js