1.具体步骤：
如果下载缓慢请配置 npm 淘宝镜像：npm config set registry http://registry.npm.taobao.org
全局安装@vue/cli：npm install -g @vue/cli
切换到你要创建项目的目录，然后使用命令创建项目：vue create xxxx
选择使用vue的版本
启动项目：npm run serve
暂停项目：Ctrl+C
2.分析脚手架结构
.文件目录 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ └── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 └── package-lock.json: 包版本控制文件
3.src/components/School.vue:
<template> <div id='Demo'> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> </template> <script> export default { name:'School', data() { return { name:'尚硅谷', address:'北京' } }, methods: { showName() { alert(this.name) } }, } </script> <style> #Demo{ background: orange; } </style>
4.src/components/Student.vue:
<template> <div> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> </div> </template> <script> export default { name:'Student', data() { return { name:'JOJO', age:20 } }, } </script>
5.src/App.vue:
<template> <div> <School></School> <Student></Student> </div> </template> <script> import School from './components/School.vue' import Student from './components/Student.vue' export default { name:'App', components:{ School, Student } } </script>
6.src/main.js:
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ el:'#app', render: h => h(App), })
7.public/index.html:
<!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 开启移动端的理想端口 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 配置页签图标 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 配置网页标题 --> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <!-- 容器 --> <div id="app"></div> </body> </html>
