VUE环境及基础

一、环境配置

1. 搭载npm/cnpm环境环境搭建参考
   1. 前往官网下载nodejs，选择安装程序(.msi)，下载并安装
   2. 判断npm安装情况：npm -v查看版本
   3. 配置Vue环境变量(prefix、cache、NODE_PATH模块存储位置)
   4. 安装express: npm install express -g
   5. 判断模块安装情况:进入模块的目录下 require(‘express’)
   6. 安装cnpm(淘宝镜像npm)
   7. 将安装目录加入系统环境配置path
   8. 判断cnpm安装情况：cnpm -v查看版本
2. 安装cli脚手架
   1. 使用脚手架才可以初始化项目: cnpm install -g vue-cli

二、项目初始化

1. 初始化Vue项目
   1. 创建项目文件夹，cmd进入文件夹位置，执行以下命令
   2. 命令 vue init webpack my-project(文件夹名称)
   3. 弹出输入框，按照要求填项目名称(此名称会显示在网站title处，避免中文)，还有项目描述/作者等……
   4. 询问是否安装vue-router路由、ESLint代码检测(测试时无需安装，否则可能出现代码不规范无法通过编译)
   5. 询问是否安装测试模块tests、NightWtach
2. 启动初始化项目
   1. 安装依赖：进入项目文件夹，执行命令 npm install
   2. 启动程序：进入项目文件夹，执行命令 npm run dev
   3. 返回项目地址，根据地址访问Vue项目

三、项目目录精简说明

1. index.html：根视图页面
2. static：静态文件目录(文档、本地json等)
3. src：源码文件
4. config/builde：项目配置文件/服务器配置文件

四、初始化界面基本说明

1. 启动配置
   导入vue:import Vue from ‘vue’
   设置启动页面：import App from ‘./App’(省略.vue文件后缀)

2. 组件使用
   引入、加载试图、创建组件名字

3. 解析main.js

   import App from './App'   //引入组件
   new Vue({
     el: '#app',   // 指定对象
     components: { App },   //创建组件名字
     template: ''    //加载视图，视图名字和组件名字要统一
   })
   引入组件App.vue并指定其为根组件；
   components注入组件App至index.html中的app标签，在其中加载视图；
   

4. 解析App.vue

   import HelloWorld from './components/HelloWorld' //引入组件HelloWorld
   export default {
   	  name: 'App',
   	  components: {  //定义组件名字HelloWorld
   	    HelloWorld  
   	  }
   }
    < HelloWorld/> //在html中使用组件
   

5. Vue使用Mustache模板
   形式：{{ 语法 }} //注意仅可填写单行语句，例如if-else语句/let a=10 就不行，let是两句的结合
   *注意：不能作用在html特性上，例如v-html="{{ xx }}"，报错

   申明变量
   data () {
         return {
         msg: 'Welcome to Your Vue.js App',
   	  hello: 'Hi,VUE'
       }
   }
   使用语法	
   变量{{ msg }} //msg为变量名，在data中被声明
   运算{{ 1+1 }}、文本{{ '你好老弟' }}、运算符{{ 0>10 ? 'Right':'False' }}
   

6. Vue组件构成
   视图部分：< template>
   逻辑部分：< script>
   样式部分：< style scoped>