Vue CLI 初始化脚手架

1.初始化脚手架

说明
1Vue脚手架 是Vue防提供的标准准开发具(开发平台)

2.最新的版本是4.x

3.文档Vue CLI

2.具体步骤

1.如果下载缓慢请配置npm淘宝镜像npm config set registry http://registry . npm. taobao.org

2.全安装@vue/clinpm install -g @vue/cli

3.切换到创建项目的目录，使用命令创建项目vue create xxx

4.选择使用vue的版本

5.启动项目npm run serve

6.抱项目npm run build

7.暂停项目Ctr1+C

Vue脚手架隐藏了所有webpack 相关的配置，若想查看具体webpack配置，请执行vue inspect > output.js

3.脚手架文件结构

文件目录

node_ modules
public
- favicon.ico: 页签图标
index. html:主页面
src
assets:存放静态资源
- logo.png
component:存放组件
L Helloworld . vue
App.vue:汇总所有组件
main.js:入口文件
.gitignore: git版本管制忽略的配置babel. config.js: babel的配置文件package.json:应用包配置文件
README . md:应用描述文件
package- lock. json::包版本控制文件

src/components/School.vue

<template>
<div class="demo">
<h2>学校名称: {{name]]</h2>
<h2>学校地址: {{address ]]</h2>
<button @click=" showName">Mf#x Z </button></div>
</ template>
<script>
export default [
name: "School",
data() f
return f
name: "UESTC",
address: "JXåß" ,
];
],
methods:
(showName() falert(this .name);],],
];
/script>

<style>
. demo i background-color: orange;]</style>