1.下载并安装Node.js 下载地址:https://nodejs.org/en/download/ 下载node-v12.16.1-x64.msi 2.在cmd中查看node.js是否安装成功,以及是否安装npm node -v npm -v 3.安装vue的脚手架工具(vue项目前期项目目录结构的工具) npm config set registry https://registry.npm.taobao.org npm config get registry npm install -g @vue/cli npm install -g @vue/cli-init npm install -g webpack@3.12.0 npm install webpack@3.12.0 -D npm install -g webpack-dev-server@2.11.2 npm install webpack-dev-server@2.11.2 -D 通过vue --version验证 查看安装目录 C:Usersliw66AppDataRoaming pm 4.在cmd中使用webpack创建一个vue项目 #进入到项目目录 cd D:projectvue #创建项目 vue init webpack 项目名称 之后会出现对话提示。单元测试和e2e测试选n,其他选择回车,安装完成 5.运行第一个Vue网站 在cmd中输入以下命令 cd 项目名称 npm run dev 打开http//:localhost:8080就可以访问 在config/index.js里面修改端口号 6.如何使用编辑工具打开网站 下载 Visual Studio Code 在vsCode中打开项目文件路径 7.vscode设置自动保存,Settings搜索 files.autoSave将off改为onFocusChange 失去焦点自动保存 8.安装element-ui npm i element-ui -S 在src/main.js中加入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 在vue文件里加入 <el-button type="primary">主要按钮</el-button> 9.Vue语法 文本 数据绑定使用 {{...}} Html 使用 v-html 指令输出 html 代码 属性 HTML 属性使用 v-bind 指令 指令 指令是带有 v- 前缀的特殊属性。 v-if v-else v-else-if 条件判断 v-for 循环 v-on 事件监听 v-model 双向数据绑定