部署环境

一、Node

官网：https://nodejs.org/zh-cn/
更新：Windows 到官网下载安装包覆盖更新
// 查看版本 node -v

// 查看版本
node -v

二、NPM

介绍：node包管理器，安装node时已自动安装

// 查看版本
npm -v 
// 查看当前镜像源
npm get registry

三、Vue CLI

介绍：Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，俗称 Vue脚手架

// 安装
npm install -g @vue/cli
// 检查版本
vue -V
// 升级包
npm update -g @vue/cli

四、Vue 项目创建

1. 基于命令行创建

vue create vue-demo
选择 Manually select features 自定义配置

choose Vue version 选择 vue 版本，目前选择 2.x
Babel 语法转换
Router 路由

工具的配置选项，选择单独配置的配置文件，方便维护
选 In dedicated config files

是否保存模板，输入 N（时间比较长）

Successfully created project vue-demo.
```
cd vue-demo
npm run build
npm run serve
```
五、目录结构
根目录

dist  项目打包后的文件夹，执行 npm run build 后生成
node_modules  项目依赖的包目录，可执行 npm install 进行安装
public  静态资源目录，通过绝对路径引用，打包时不会被 webpack 解析处理，文件会原封不动移至 dist 目录下
src  项目根目录
    assets  静态资源目录，打包时会被 webpack 解析压缩合并
    components  组件目录
    router  路由文件目录
    views 视图文件目录
    App.vue  Vue 项目根组件
    main.js Vue 项目入口文件
browserslistrc  目标浏览器配置文件
gitignore  git 忽略配置文件
babel.config.js  babel 配置文件
package-lock.json  项目当前安装的 npm 包的具体来源和版本号
package.json  npm 包管理和项目配置文件
README.md  项目说明文档
vue.config.js  vue-cli 的配置文件，需手动创建

.vue 文件

快速创建包含 vue 结构文件，以 VsCode 为例，设置 - 用户代码片段 - 新建全局代码片段文件

输入文件名—键入如下代码，保存

"Print to console": {
      "prefix": "vue",
      "body": [
          "<template>",
          "\t<div class=\"\">$2</div>",
          "</template>",
          "",
          "<script>",
          "export default {",
          "    name: '',",
          "    props: {},",
          "    components: {},",
          "    data() {",
          "        return {}",
          "    },",
          "    computed: {},",
          "    watch: {},",
          "    methods: {},",
          "    created() {},",
          "    mounted() {},",
          "}",
          "</script>",
          "",
          "<style scoped lang=\"less\">",
          "</style>"
      ],
      "description": "Log output to console"
  }

新建 .vue 文件内输入 vue 即可快速生成结构

Vue - 图7

name 名称，通常在作为组件时自身调用自身使用
props 用于接收父组件的数据
components 引用的组件要在此处声明
data 各类数据
computed 计算属性，不支持异步
watch 监听属性，支持异步
methods 此处写函数事件
created 生命周期钩子函数，实例尚未挂载，不能访问DOM，可以访问 data 和 methods
mounted 生命周期钩子函数，实例挂载完成，可以访问DOM、data 和 methods

Qt

VScode “在此系统上禁止运行脚本”报错

1.以管理员身份运行vscode;
2. 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的;
3. 执行：set-ExecutionPolicy RemoteSigned;
4. 这时再执行get-ExecutionPolicy，就显示RemoteSigned;

Vue