Vue的项目操作

vue命令集合

1. 切换资源

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    ​
    使用淘宝镜像地址

2. 全局安装脚手架

    npm install webpack@4.27.1  -g   
    验证：webpack -v
    安装vue-cli：
    npm install --global vue-cli 

3. 创建项目

    vue init webpack   名字
    vue init webpack  bilibili

4. 导入资源

 cnpm install 

5. 运行命令

    cnpm run dev

项目过程中需要：

前端路由：

 cnpm install vue-router -S  

请求网络数据:

 npm install vue vue-resource --save-dev

vuex:

 npm install vuex --save

图片预览的组件:

 npm i vue-preview -S

日期格式：

 npm install moment -save  全局过滤器
 http://momentjs.cn/

muit-ui:

 npm i mint-ui --save
 https://www.cnblogs.com/stella1024/p/7771334.html

node-sass

npm install node-sass --save

css-loader:

 cnpm install css-loader --save-dev
 ​
 cnpm install style-loader --save-dev

项目打包：

 npm run build

webpack命令集合

安装nrm

 npm install -g nrm
 ​
 nrm ls  =》 输出所有镜像源
 ​
 nrm use taobao  =》切换镜像源

npm基础命令：

 npm list -g  =>查看安装的包和插件
 npm ls webpack -g =》查看单个

问题：

 npm cache clear --force
 ​
 rm -rf node_modules

重新安装环境：

 npm install

 

 

 

运行jar包：

 Java -jar demo-0.0.1-SNAPSHOT.jar

json设置：

 "dependencies": {
     "calendar.vue": "0.0.1",
     "mint-ui": "^2.2.13",
     "moment": "^2.27.0",
     "vue": "^2.5.2",
     "vue-preview": "^1.1.3",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1",
     "vuex": "^3.5.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-remove-strict-mode": "0.0.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "node-notifier": "^5.1.2",
     "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
     "sass-loader": "^7.3.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.11.5",
     "webpack-merge": "^4.1.0"
   },
   "engines": {
     "node": ">= 6.0.0",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ]
 }

子组件到父组件传值：

子组件中得设置：

 this.$emit("child-event", this.add);

父组件得接收：

 <hello-word3 @child-event="parentEvent"></hello-word3>
     <h2>子组件传递过来得数据：{{msg}}</h2>
  parentEvent(data) {
       this.msg = data;
     },

注意：

 传递过程得名称必须要保持一直性

 

 

父组件到子组件得传值：

父组件中得设置：

  <hello-word2 v-bind:HomeLsit="homeLists"></hello-word2>
  homeLists: [
         { name: "父亲1", age: "22" },
         { name: "父亲2", age: "22" },
       ],

在子组件中进行接收

  props: ["HomeLsit"],
  <ul v-for="(item,index) in HomeLsit" v-bind:key="index">
       <li>{{item.name}}</li>
       <li>{{item.age}}</li>
     </ul>

注意：

 父组件到子组件必须使用props进行接收
 子组件中接收得名字是在父组件中：名字

 

子组件到子组件

就是第一步：子组件到父组件 ，然后在是父组件到子组件得传值

 

在vue中使用sessionStorage和localStorage

localStorage是必须自己手动删除得key ，可以使用于购物类系统得数据保存

sessionStorage是关闭页面自动删除key，可以使用于登录功能等等 该数据不会被爬取到

在使用中：

 存：
 ​
 sessionStorage.setItem("signoutShow",this.signoutShow);
  
 取：
 this.signoutShow = sessionStorage.getItem('signoutShow');

 

sessionStorage

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 改数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

1.方法

sessionStorage.key(int index) //返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
 ​
 sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。
 ​
 sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数，
　　　　　　　　　　　　　　　　　　　　　　　　　　将键值对添加到存储中；如果键名存在，则更新其对应的值。
 ​
 sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。
 ​
 sessionStorage.clear() //清除 sessionStorage 对象所有的项。

2，存储数据

2.1 采用setItem()方法存储

 sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

2.2 通过属性方式存储

 sessionStorage['testKey'] = '这是一个测试的value值';

2.3 存储Json对象

 sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。
 var userEntity = {
 name: 'tom',
 age: 22
 };
 ​
 // 存储值：将对象转换为Json字符串
 sessionStorage.setItem('user', JSON.stringify(userEntity));
 ​
 // 取值时：把获取到的Json字符串转换回对象
 var userJsonStr = sessionStorage.getItem('user');
 userEntity = JSON.parse(userJsonStr);
 console.log(userEntity.name); // => tom

3,读取数据

3.1 通过getItem()方法取值

 sessionStorage.getItem('testKey'); // => 返回testKey对应的值

3.2 通过属性方式取值

 sessionStorage['testKey']; // => 这是一个测试的value值

localStorage

vue中实现本地储存的方法：localStorage，在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

(1).储存数据

 localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)

(2).取出数据

 localStorage.getItem('accessToken')

(3).删除储存数据

  localStorage.removeItem('accessToken')

(4).更改数据

 localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)

使用时有两点需要注意过的地方：

. localStorage在浏览器的隐私模式下面是不可读取的。 . localStorage本质上是对字符串的读取，有json格式时需要JSON.stringify()转化为字符串。 . localStorage不能被爬虫抓取到