开发知识点-NodeJs-npm/Pnpm/Yarn包管理器

ref

不仅可以获取DOM元素还可以获取组件
原生js获取DOM元素是很麻烦的
需要用如：document.getElementById这么长的API来获取
jQuery应运而生，$("#id")的使用



1、给dom节点记上ref属性，可以理解为给dom节点起了个名字。

2、加上ref之后，在$refs属性中多了这个元素的引用。

3、通过vue实例的$refs属性拿到这个dom元素。

prop

nvm管理工具

Vue CLI 3需要 nodeJs ≥ 8.9 
官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本


package.json

@keyup

 (键盘事件)

vue init webpack projectname
项目的名称不能大写，不然会报错

npm install -g @vue/cli-init

a)第一项：项目名称，可以直接按enter键

b)第二项：项目描述一个Vue.js，可以直接按enter键

c)第三项：作者名称，输入作者名称：如下图所示

d) 第四项：输入作者名称后按enter键后显示如下图选项，
使用上下箭头选择，通常默认选择第一项，按enter选中

e)第五项：是否安装Vue路由,输入Y/N

f)第六项：使用 ESLint 到你的代码;
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，
它的目标是保证代码的一致性和避免错误。

g)第七项：选择一个预置ESLint，使用上下箭头选择

h)第八项：设置单元测 Y/N

i)第九项：设置端到端测试 Y/N

上述选项设置后选择，选择包管理工具如下所示（npm/yarn）

? Project name godeye
? Project description A Vue.js project
? Author amingMM <1274510382@qq.com>
? Vue build standalone      
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm


cd  godeye
npm run dev

projectName/config/index.js的端口配置	

vue -V
@vue/cli 5.0.8

vue create hello-world


 $ cd wordread
 $ npm run serve


删除package-lock.json文件


npm clean cache -f


npm install


 npm uninstall -g vue-cli
 npm install -g @vue/cli 
 
 npm install --save axios 
 
 import axios from 'axios'

Vue.prototype.$axios = axios
 

如果 js-cookie 找不到，还要安装js-cookie:

npm install --save js-cookie


main.js

The "axios" component has been registered but not used vue/no-unused-components
在 package.json 或 .eslintrc.js （如果存在此文件的话）的eslintConfig下添加：

    "rules": {
   
      "vue/no-unused-components": "off", 
      "no-unused-vars":"off" 
    }
    
    
npm install vue-router --save

npm run build

Module not found: Error: Can't resolve './router'

import Vue from 'vue'
import VueRouter from 'vue-router'

 src 文件夹中的 router 文件夹下的 index.js 文件中配置路由信息
 
 1.Vue作为一个单页面应用路由一般分为，路由组件与一般组件，路由组件一般放在 pages 文件夹中，一般组件通常放在 components 文件夹中
2.每个组件都有自己的 $route 属性，里面存储着自己的路由信息，可以通过组件的 this.route 属性获取到，但是整个项目只有一个 router 属性，可以通过组件的 this.router 属性获取到
3.每个组件的 $route 属性并不相同，但是每个组件的 $router 属性是相同的 

import vue from 'vue'
import router from 'vue-router' 
import App from '../App.vue'

vue.use(router)
export default new vueter({
   
    router:[
        {
   
            path:'/',
            redirect:'/'
        },
        {
   
            path:'/index',
            component:App
        }
    ]
})

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    response = make_response(send_from_directory(path=ss,directory=ss,filename=file_path,as_attachment=True))
    response.headers["Content-Disposition"] = "attachment; filename={}".format(
    file_path.encode().decode('latin-1'))
    response.headers["Access-Control-Allow-Origin"] = "*"

https://v2.cn.vuejs.org/v2/guide/installation.html


cnpm i docx-preview

import {a,b,c} from '你的路径'

引入Vue组件的话也是这样，不过不用写大括号，直接引用，例如

import StatisticsCard from './components/StatisticsCard'
1
后缀名可写可不写，优先级顺序也是按照上面的来走的、
引用Vue文件有个特殊的地方，就是要在components里面挂载一下他，例如

  components: {
    StatisticsCard
  }, 
  
  
  路径可以是相对路径也可以是绝对路径，后缀名可写可不写，他会按照你在webpack.base.conf.js文件中的设置来绝对后缀名选择的优先级
比如你如果设置的是这样

module.exports = {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': resolve('src')
        }
      }
    ...
    } 
    

docx-preview.js

https://zhuanlan.zhihu.com/p/437059185


https://github.com/vuejs/devtools



 Cannot use import statement outside a module
 
 
用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type="text/javascript"，需要改为type="module"，更改后的index.html:
 
    <script type="module"  
    
    
         /**
		* 第一个参数： data为文件流，Blob | ArrayBuffer | Uint8Array 格式
		* 第二个参数： 渲染到页面的dom元素
		* 第三个参数： 渲染word文档的样式的元素，如果为null，则设置到第二个参数的DOM上
		* 第四个参数： 配置对象
		*/
		docx.renderAsync(data, this.$refs.file, null, {
   
		  	className: 'text-docx', //class name/prefix for default and document style classes
		   	inWrapper: true, //enables rendering of wrapper around document content
		   	ignoreWidth: false, //disables rendering width of page
		   	ignoreHeight: false, //disables rendering height of page
		   	ignoreFonts: false, //disables fonts rendering
		   	breakPages: true, //enables page breaking on page breaks
		   	ignoreLastRenderedPageBreak: true, //disables page breaking on lastRenderedPageBreak elements
		   	experimental: true, //enables experimental features (tab stops calculation)
		   	trimXmlDeclaration: true, //if true, xml declaration will be removed from xml documents before parsing
		   	useBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
		   	useMathMLPolyfill: true, //includes MathML polyfills for chrome, edge, etc.
		   	debug: false //enables additional logging
		 }) // 渲染到页面 

this.$refs.ref_name.功能
ref有在mounted中才能使用
			

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试vue</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vueController">
        {
   {
   msg}}<br>
        <!--这个输入框绑定msg的值-->
        <input type="text" v-model="msg"><br>
        <!--绑定changeMsg方法到按钮上-->
        <input type="button" value="点我" @click="changeMsg">
    </div>

<script>
    var test = new Vue({
   
        el: "#vueController",
        data: {
   
            msg: ""
        },
        methods: {
   
            changeMsg: function () {
   
                var that = this;
                that.msg = "因崔斯听";
            }
        },
        mounted: function () {
   
            var that = this;
            that.msg = "hello vue";
        }
    })
</script>
</body>
</html>


 
 

vue文件介绍

1、插值表达式：格式{
  {表达式}}

支持字符串{
  {''}}、对象{
  {object.key}}、判断后的布尔值{
  {true}}、三元表达式{
  {a==b?'正确':'错误'}}

注：必须在data这个函数返回对象中声明

2、常用指令

v-text其实就是给元素的innerText属性赋值，只能用在双标签中

v-html就是给元素的innerHTml赋值、

v-if\v-if-else\v-else、

v-show隐藏元素，就是将display：none

v-bind给元素属性赋值，语法：<div v-bind:属性名='变量'></div>，  简写 <div :属性名='变量'></div>  

v-on 处理原生事件的 。用法：在元素上v-on:原生事件名=“操作方法” ， 简写：@原生事件名=“操作方法”

v-model 双向数据流绑定，即页面改变影响内存，内存数据改变影响页面。 

v-model与v-bind区别：

1、v-bind的是单向的，只能将vue中的数据同步到页面。

2、v-model 双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。例子：<input v-model='myValue'></input>  <button v-show='myValue=='xxx'>按钮</button>,new vue中默认myValue='hellow'，如果刷新html页面，这时候input的默认值是hellow，说明vue的属性值成功同步到页面，当输入xxx时，按钮能够显现，说明用户输入的值能够赋值给vue的属性，所以是双向绑定。

3、v-bind可以给任何属性赋值，v-model只能给具备value属性的元素进行数据双向绑定。

v-for的用法

基本用法v-for="item in array"

对象用法v-for="item in object"

v-for 中的属性 数组 item index  ，对象 item 、key、index

3、组件的用法

在new Value中使用components声明要用的组件,key是组件值，value是组件对象

<script>

var APP = {template:"<h>我是入口组件</h>"}  -----------生出子

new Vue({

　　el:"#app",

　　template:"<app/>"，//组件调用   ---------------使用子

　　components:{app:APP} ---------------------声明子

}) 

</script>

//访问页面后，可以看到我是入口组件 这个显示内容，说明组件调用成功。 口诀： 生出子、 声明子、使用子

使用组件以单标签（<app/>）使用，只能在new Vue中可以，如果在其他地方请使用双标签,比如将上述例子中的APP组件再调用其他组件时，必须用双标签如下

var myHeader ={template:<h>我是头</h>"}

var myBody ={template:<h>我是主要内容</h>"}

var APP = {

components:{'my-header':myHeader ,'my-body':myBody } ，

template:"<div>

　　　　　　<my-header></my-header>  -----------在这使用时，必须双标签，而不能是<my-header/>

　　　　　　<my-body></my-body>

　　　　</div>"

}  

//访问页面可以看到 我是头  我是主要内容的显示，说明调用成功。

组件之间传递数据

父向子传递数据 其实就是给子使用v-bind绑定数据

var APP = {

components:{'my-header':myHeader  } ，

template:"<div>

　　　　　　<my-header :title='title' ></my-header>  -----------v-bind绑定数据

　　　　</div>",

data:function(){

return {

title:'测试'

}

}

｝

子组件的修改如下： 利用props接收父组件传递过来的参数

var myHeader ={

　　template:<h>我是头 {
  {title}}</h>",

　　props:['title']

}

  
    <div id="vueController"> 
        <input type="button" value="点我" @click="changeMsg">
    </div>

    


    <script src="static/vue/vue.js"></script>
    <script src="static/vue/httpVueloader.js"></script>

    <script type="module" >
        import docx from '../static/vue/docx-preview.js'

        docx.renderAsync(data, this.$refs.file, null, {
   
		  	className: 'text-docx', //class name/prefix for default and document style classes
		   	inWrapper: true, //enables rendering of wrapper around document content
		   	ignoreWidth: false, //disables rendering width of page
		   	ignoreHeight: false, //disables rendering height of page
		   	ignoreFonts: false, //disables fonts rendering
		   	breakPages: true, //enables page breaking on page breaks
		   	ignoreLastRenderedPageBreak: true,