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
成功界面

常用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官方站的代码提升开发效率。