使用Vue脚手架（一）创建脚手架&脚手架的结构&render函数&修改默认配置

1.创建脚手架*全局安装：第一步：配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org第二步：全局安装脚手架：npm install -g @vue/cli第三步：切换到你要创建项目的目录，然后使用命令创建项目：vue create xxxx2.脚手架的结构*.gitignore：git的忽略文件，配置不想被git管理的

桃桃tao

988人浏览 · 2022-03-10 08:31:58

桃桃tao · 2022-03-10 08:31:58 发布

1.创建脚手架

*全局安装：

第一步：配置npm淘宝镜像：

npm config set registry https://registry.npm.taobao.org

第二步：全局安装脚手架：

npm install -g @vue/cli

第三步：切换到你要创建项目的目录，然后使用命令创建项目：

vue create xxxx

2.脚手架的结构

*.gitignore：git的忽略文件，配置不想被git管理的文件

*babel.config.js：

*package.json：包的说明书

* package-lock.json：包版本控制文件

*src：

main.js：npm run serve最先执行的文件，整个项目的入口文件

// 引入vue
import Vue from 'vue'
//引入App组件，是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建vue的实例对象
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
}).$mount('#app')

App.vue：父组件

assets：存放静态资源

components：存放组件

*public：index.html：进入页面

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的特殊配置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页签图标，BASE_URL表示public目录 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 标题，把package.josn中的name作为标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <!-- 如果浏览器不支持js，则显示以下内容 -->
      <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>