vue标准化

在vscode以vue-cli搭建，启动，调试

一 、准备

1、下载node.js
2、在cmd查看node.js版本node -v，查看npm版本npm -v
3、为了加快npm的下载速度，可以更换npm的registry为国内镜像，或者下载cnpm使用cnpm，使用 cnpm 命令来下载安装淘宝镜像上的 npm 包，而不必修改 npm 的 register。

npm config set registry https://registry.npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、安装vue-cli

npm install -g @vue/cli
//注意使用npm install -g vue-cli会导致版本vue版本低于3.0，一些命令，比如vue ui就无法使用

5、在vscode终端使用vue命令，报错（可直接在cmd使用vue ui构建）

vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ vue
+ ~~~
    + CategoryInfo          : ObjectNotFound: (vue:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

解决：
在vscode的终端中输入

get-ExecutionPolicy

查看执行策略，如果为Restricted，那么需要修改
用管理员身份运行power shell
在终端中输入Set-ExecutionPolicy RemoteSigned
修改当前终端的执行策略，重启vscode既可以正常使用vue命令

二、构建，启动

6、使用命令vue ui在ui界面构建项目，启动项目使用命令

npm run serve 
//npm run dev是旧版本的启动方式

三、调试

使用火狐浏览器，在扩展和主题搜索安装Vue.js devtools

四、打包

npm run build

打包部署会出现缩放问题，和打包时windows缩放百分比有关

vue-cli搭建的工程解析

一、工程结构解析

1、搭建vue项目之后，重要的文件有三个

src/main.js
src/App.vue
public/index.html

main.js和App.vue起到渲染index.html的作用
在main.js中new Vue，用el挂载index.html的

，html与css内容作为组件App.vue通过render: h => h(App)渲染
2、
App.vue是一个单文件组件，是所有其他组件的父view/router，所有其它的页面都是一个个单文件组件通过App.vue的展示，即你看到的视图都是App.vue+子组件的内容，所以不要在App.vue加其它的东西，否则会出现在任何页面。

单文件组件

vue的单文件组件以.vue结尾，里面可以包含html(template)，css(style)，js(script)，结构如下：

<template>
  <div id="app">
  div>
template>
<script>
export default {
  data() {
    return {
      username: "", //用户名
      password: "", //密码
  	}
  },
   methods:{
    login:function(event){
    }
   }
}
script>
<style scoped>
#time_show {
  bottom: 30px;
  color: #eeeeee;
  position: absolute;
  left: 190px; /*左边距*/
}
style>