Win10安装Vue

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 双向数据绑定
原文地址:https://www.cnblogs.com/liw66/p/12573913.html