一、 Vue脚手架的创建
- 第一步：全局安装@vue/cli
npm install -g @vue/cli
如出现下载缓慢请配置npm淘宝镜像：npm config set registry registry.npm.taobao.org
- 第二步：切换到要创建项目的目录，然后使用命令创建项目
vue create xxx
当创建项目vue create vue_test后按下回车，成功时产生如下图所示
- 第三步：如上图，使用
cd vue_test进入当前文件中，启动项目npm run serve
当Vue脚手架创建完成，且启动项目时，命令行会产生如下图所示，即创建成功：
NetWork为同局域网中的其它同事使用，本人两个地址都可以使用
二、分析脚手架的VUE_CLI
vue_test的文件的组成结构如下图所示：
当执行完
npm run serve时直接运行main.js(main.js为整个项目的入口文件)
/*
该文件时整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象
new Vue({
el:'#app',
//一下代码完成的功能：将App组件放入容器中
render: h => h(App),
})
页面文件
index.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>
<!-- 当浏览器不支持js时,noscript中的元素就会被渲染-->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 容器 -->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
