Vue及Vue cli相关技巧

快速轻便的前端开发工具，本文档最低版本为vue cli 4.1.2。

本地文件夹http服务器http-server

已经安装nodejs的客户端，可以通过此方法启动http访问本地文件夹，好处是可以方便实现跨域和防止跨域（google表现的同源策略）等，避免每次要访问一点静态资源总要去配置IIS或Apache，本工具官方网址https://www.npmjs.com/package/http-server。

#安装http-server服务
npm install http-server -g
#进入静态文件目录运行命令，即会弹输出Http结果
http-server
#或者你可以指定路径运行:
http-server D:\Folder
成功界面

完整教程-> https://www.z01.com/blog/products/3526.shtml

vue安装和卸载

#安装最新版本
npm install -g @vue/cli
或
yarn global add @vue/cli

#卸载之前版本
npm uninstall vue-cli -g 
或 
yarn global remove vue-cli

#检查版本号
vue --version
或
vue -V

npm和yarn包的管理与移除

#全局安装与移除
npm install -g @vue/cli
npm uninstall -g vue-cli

或
yarn global add @vue/cli
yarn global remove vue-cli

删除全局安装的npm包

方法一 ： 使用命令。


npm uninstall -g 包名

方法二： 直接找到对应包删除。

C:\Users\自己用户的文件夹\AppData\Roaming\npm下，将对应的包删除即可。

查看本地安装的所有npm包

各位肯定安装过很多的全局npm包。就是 npm install xxx -g，这样的，时间一久，完全记不得自己装过那些东西，有时你想看一下或者删除一些无用的包，下面就记录一下该操作。

# 1.查看
npm list -g --depth 0  // 若需要权限 请加上 sudo 命令
# 2. 更新
npm update -g xxx
# 3. 删除
npm uninstall -g xxx

常用vue-cli命令

一些常用vue-cli命令

#安装vue cli
npm install -g @vue/cli
#创建vue cli项目
vue create my-project
#vue cli可视化管理工具
vue ui
#运行当前项目
npm run serve
用法：vue-cli-service serve [options] [entry]
选项：
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)
#编译当前项目
npm run build
用法：vue-cli-service build [options] [entry|pattern]
选项：
  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

这里还有一些有用的命令参数：

--modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

--target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

--report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

在vue-cli项目中使用bootstrap

虽然Vue插件库中有一个bootstrap-vue的插件，但是此插件并不会带来完整的bootstrap体验，所以需要用本方法进行全局引用（zico方法引用相同）

#首先安装引用插件
npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

如果cli版本小于3：需要配置webpack.base.conf.js

//在顶部添加
const webpack = require('webpack')

//在module.exports = {}末尾添加下面代码
module.exports = {
...
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
}

在vue-cli 3版本中，需要在根目录中添加一个文件vue.config.js，然后写入下面配置：

#首先安装引用插件
npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

如果cli版本小于3：需要配置webpack.base.conf.js

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      })
    ]
  }
}

最后在main.js中引入：

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

Vue 中 error处理：no-mixed-spaces-and-tabs

在处理vue时，常会报“no-mixed-spaces-and-tabs”的错，这是提示我们禁止使用 空格 和 tab 混合缩进；大多数代码约定要求使用空格或 tab 进行缩进。因此，一行代码同时混有 tab 缩进和空格缩进，通常是错误的；

解决方法是删除报错的地方的空格，再进行编译，成功通过。

不能更改文件名，发布时报错Error: No module factory available for dependency type: CssDependency

vue cli4 的 vue ui的发布界面中,点击任务-bulid发布报错Error: No module factory available for dependency type: CssDependency，而如果直接使用npm run build则不会报错，但是可以发布出来。

这样发布出来的文件有一个问题，如将index.html改为test.html，其它目录全不变，但依然不能访问，原因是启用了hostory模式的路由，修改方法：将路由改为默认的hash模式，一般是定义\src\router\router.js下的文件：

const router = new VueRouter({
  routes
  // mode: 'history',
  // routes,
})

重装安装Npm依赖的方法

有两种方法，前者是重装，后者是删除后重装

#重新安装依赖-请分步执行
npm uninstall --save-dev webpack
rm -R node_modules
npm install

#删除目录重新安装-请分步执行
rm -r node_modules
rm package-lock.json
npm i

@babel/polyfill的使用

Babel 包含一个polyfill 库。这个库里包含 regenerator 和 core-js.这个库将会模拟一个完全的 ES2015+ 的环境。

这意味着你可以使用 新的内置语法 比如 promise 或者 WeakMap， 静态方法比如Array.from 或 Object.assign, 实例方法 比如 Array.prototype.includes 和 generator 函数。

#安装@babel/polyfill
npm install --save @babel/polyfill
SIZE:由于是在source code 前运行的，所以安装的时候是 --save

polyfill 用起来很方便，但是你应该和 @babel/preset-env 以及 useBuiltIns option 一起用。这样在使用的时候就不会包含那些我们一般不会用到的polyfill 了。如果不这样做的话，我们还是建议你手动引入你需要的每个polyfill。

T39提案：如果你想使用一些不在 Stage 4 中的提案，@babel/polyfill 不会自动帮你引入它们。你可以从 core-js 中单独引入。

在浏览器中使用的话，直接引入@babel/polyfill 发布的文件dist/polyfill.js 就行了。 这个文件需要包含在所有你编译好的代码之前。你可以把它放在你编译好的代码之前，也可以放在一个script 标签之中。

完整示例：

<!DOCTYPE html>
<html>
<head>
<title>浏览器环境babel</title>
<meta charset="utf-8">
</head>
<body>
<div id="output"></div>
<!-- 引入polyfill 让es6新的api能够在ie11上使用 这其实和babel没什么关系 -->
<script type="text/javascript" src="./polyfill.min.js"></script>
<!-- 引用@babel/standalone 这个是babel在浏览器上使用的模块 会把ES6转成ES5 但是它依赖ES6的新api -->
<script type="text/javascript" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
</body>
</html>

引入Jquery、zico和Bootstrap

方法一：在Vue cli4中，可以直接加载BootstrapVue插件，此插件引用后，则需要使用专用的标签来使用(否则会失去相应事件属性），比如导航栏则需要写作为： 

<div> 
    <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
    <b-navbar-nav>  
        <b-nav-item href="#">Link</b-nav-item>  
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
    </b-navbar-nav>
    
    <!-- Right aligned nav items -->
    <b-navbar-nav class="ml-auto">  
    <b-nav-form>    
        <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>    
        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>  
    </b-nav-form> 
    
    <b-nav-item-dropdown text="Lang" right>    
        <b-dropdown-item href="#">EN</b-dropdown-item>    
        <b-dropdown-item href="#">ES</b-dropdown-item>    
        <b-dropdown-item href="#">RU</b-dropdown-item>    
        <b-dropdown-item href="#">FA</b-dropdown-item>  
    </b-nav-item-dropdown>
    
    <b-nav-item-dropdown right>    
        <!-- Using 'button-content' slot -->    
        <template v-slot:button-content>      
            <em>User</em>    
        </template>    
        <b-dropdown-item href="#">Profile</b-dropdown-item>    
        <b-dropdown-item href="#">Sign Out</b-dropdown-item>  
        </b-nav-item-dropdown>
    </b-navbar-nav>
    </b-collapse>
</b-navbar>
</div>

方法二：如果你对原生的html更熟悉，则可以采用手工方法，分别引入Jquery、zico和Bootstrap

#第一步，分别在项目文件目录运行npm获取四个插件（其中bootstrap需要引用popper.js)
npm installjquery --save-dev
npm install zico -D
npm install bootstrap -D
npm install popper.js -D



#第二步，在main.js中引用相关方法
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 自定义引用bootstrap和zico
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "zico/css/zico.min.css";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')



#第三步，检查package.json中是否有引用，没有则补上，注意下方dependencies段落：
{
  "name": "vuecli-homepage",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "zico": "^1.5.1"
  },
  "devDependencies": {
  ......

上面三步完成后，就可以自由的采用原生的bootstrap代码和标准的html来写作了，直接拷贝 code.z01.com/v4官方站的代码提升开发效率。

npm安装模块遇到ENOENT: no such file or directory, rename错误

一个已经开发过程中的项目，突然要加一个组件，但无论如何 都无当安装成功，提示报错如下：

ENOENT: no such file or directory, rename 'C:\Projects\demo\.staging\axios-6e40ca64\node_modules\is-buffer' -> 'C:\Projects\demo\node_modules\.staging\is-buffer-ddd200d3'

而且因为运行了错误的安装，原包也会出现问题，无法npm run serve或build，虽然可以用删除node_modules再重新安装npm，恢复原包，但新包怎么也安装不上。

github上有帮助：

Besides deleting package-lock.json the other workaround here is to upgrade to node-sqlite3@4.0.2

解决方法是：删除package-lock.json，然后运行npm i xxx，安装成功后，再恢复package-lock.json，虽然麻烦，但有效。