Vue CLI 使用tips

初发布于 27 Jun 2018 | in JavaScript

@vue/cli是全局安装的 npm 包，未终端命令行工具提供 vue 指令。

@vue/cli-service 是局部安装的 npm 包，作为（由 @vue/cli 创建的）项目开发的 devDependencies。

CLI Service主要基于 webpack 和 webpack-dev-server 两个工具。

使用 vue ui 创建的vue项目可以通过 GUI 执行 npm scripts 的 serve 和 build 指令，呈现 webpack Analyzer 的图形化结果。

html和css

  1. 在所有 <template lang="pug"> 的区域支持 pug 模板

    npm install -D pug-plain-loader pug

  2. 支持 sass 语法，手动安装

    npm install -D sass-loader node-sass

js

  1. 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。在应用的代码中访问

    console.log(process.env.VUE_APP_SECRET)

    此外，在应用中始终可用的还有： NODE_ENV 和 BASE_URL （应用会部署到的基础路径）2个特殊的变量.

  2. 按需引入 element-ui 组件

    // 安装 babel 插件实现按需引入 npm install babel-plugin-component -D // 在根目录下 babel.config.js 中添加配置 “plugins”: [ [ “component”, { “libraryName”: “element-ui”, “styleLibraryName”: “theme-chalk” } ] ]

  3. Vue CLI app会为所有异步 js 文件 chunks自动生成 prefetch hints（使用 webpack code splitting 的 dynamic import()).因此，关闭模块入口时，最好把异步引入的代码也注释掉。如果你的应用很大，有很多异步加载模块，且用户主要为mobile用户，建议 disable prefetch links，手动选择需要 prefetch 的模块。

其他

  1. 文件引用

    • 以 . 开头，相对路径，基于文件系统中的目录结构进行解析，适用于 JavaScript, CSS or *.vue files
    • 以 ~ 开头，以 module request 解析，可以引用 node_modules里的资源、或者使用 webpack alias
    • 以 @ 开头，指向 Vue CLI 项目根目录下的 src 目录

  2. .env文件

    • 如果环境配置文件不含 NODE_ENV 变量，则该变量蒋被 set to “production” in production mode, “test” in test mode, 其余默认设为 “development”。
    • 无论你要往哪一个环境部署应用，使用 vue-cli-service build 命令都需要将 NODE_ENV 置为 production，以使用对应的 webpack 配置获得 ready for deployment 的应用。
    • .env文件在 vue-cli-service 命令启动时加载，如修改文件，则需要重启服务。

  3. 通过传递 –mode 选项参数，为 vue-cli-service 命令行覆盖默认的模式。

    .env.[mode] # 只在指定的模式中被载入

  4. 前端应用独立于后端部署——即后端暴露一个前端可访问的 API，前端实际上是纯静态应用。那么可以将 dist 目录里构建的内容部署到任何静态文件服务器中，但要确保正确的 baseUrl。
  5. Vue CLI app会为应用初始渲染所需的全部文件，生成 preload hints
  6. 默认 productionSourceMap 为 true，我们对 test、pre 关闭以 speed up production builds。线上因为 sentry 监控需定位报错而开启。

macOS首次安装 vue cli

根据官方文档直接运行 npm install -g @vue/cli ，报错：

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

命令行前加 sudo 重新执行，安装结束。

检查版本：

vue --version // @vue/cli 4.1.2

虽然安装成功，但是过程中有报错日志

> fsevents@1.2.11 install /usr/local/lib/node_modules/@vue/cli/node_modules/fsevents
> node-gyp rebuild

gyp WARN EACCES current user ("nobody") does not have permission to access the dev dir "/Users/wuxue/Library/Caches/node-gyp/12.14.1"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/.node-gyp"
gyp WARN install got an error, rolling back install
gyp WARN install got an error, rolling back install
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/.node-gyp'
gyp ERR! System Darwin 19.2.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/@vue/cli/node_modules/fsevents
gyp ERR! node -v v12.14.1
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok

快速原型开发

使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发。

vue serve [options] [entry]
  • 常用 options 为 -o, –open
  • 不指定 entry 文件，则默认在当前目录查找 main.js, index.js, App.vue 或 app.vue
  • 使用cli创建的项目默认 setup (webpack, babel, postcss & eslint)

使用前需要额外安装一个全局的扩展：

npm install -g @vue/cli-service-global

同样报错，命令行前加 sudo。仍然有上面 node-gyp 的报错。

node-sass 安装容易失败，如果报错或中断，先 uninstall 再重新安装。

在重新安装 node-sass 后，看到 gyp info ok。虽然上面有报错，项目跑起来了。

终极解决 npm 全局安装 permission 报错

改变 node_modules 目录的 permission to all users：

cd /usr/local/lib/
sudo chmod 777 node_modules
npm install -g react-devtools