一、环境配置
- 搭载npm/cnpm环境环境搭建参考
- 前往官网下载nodejs,选择安装程序(.msi),下载并安装
- 判断npm安装情况:npm -v查看版本
- 配置Vue环境变量(prefix、cache、NODE_PATH模块存储位置)
- 安装express: npm install express -g
- 判断模块安装情况:进入模块的目录下 require(‘express’)
- 安装cnpm(淘宝镜像npm)
- 将安装目录加入系统环境配置path
- 判断cnpm安装情况:cnpm -v查看版本
- 安装cli脚手架
- 使用脚手架才可以初始化项目: cnpm install -g vue-cli
二、项目初始化
- 初始化Vue项目
- 创建项目文件夹,cmd进入文件夹位置,执行以下命令
- 命令 vue init webpack my-project(文件夹名称)
- 弹出输入框,按照要求填项目名称(此名称会显示在网站title处,避免中文),还有项目描述/作者等……
- 询问是否安装vue-router路由、ESLint代码检测(测试时无需安装,否则可能出现代码不规范无法通过编译)
- 询问是否安装测试模块tests、NightWtach
- 启动初始化项目
- 安装依赖:进入项目文件夹,执行命令 npm install
- 启动程序:进入项目文件夹,执行命令 npm run dev
- 返回项目地址,根据地址访问Vue项目
三、项目目录精简说明
- index.html:根视图页面
- static:静态文件目录(文档、本地json等)
- src:源码文件
- config/builde:项目配置文件/服务器配置文件
四、初始化界面基本说明
-
启动配置
导入vue:import Vue from ‘vue’
设置启动页面:import App from ‘./App’(省略.vue文件后缀) -
组件使用
引入、加载试图、创建组件名字 -
解析main.js
import App from './App' //引入组件 new Vue({ el: '#app', // 指定对象 components: { App }, //创建组件名字 template: '<App/>' //加载视图,视图名字和组件名字要统一 }) 引入组件App.vue并指定其为根组件; components注入组件App至index.html中的app标签,在其中加载视图;
-
解析App.vue
import HelloWorld from './components/HelloWorld' //引入组件HelloWorld export default { name: 'App', components: { //定义组件名字HelloWorld HelloWorld } } < HelloWorld/> //在html中使用组件
-
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' }}
-
Vue组件构成
视图部分:< template>
逻辑部分:< script>
样式部分:< style scoped>