2022-12-04

一、初始化脚手架3.1.1.说明

1. Vue脚手架是Vue官方提供的标准化开发工具(开发平台)2.最新的版本是4.x

2.文档Vue CLl3.1.2.具体步骤

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

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

3.切换到创建项目的目录,使用命令创建项目vue create xxx4.选择使用vue的版本

5.启动项目npm run serve6.打包项目npm run build7.暂停项目Ctr1+C

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

二、脚手架文件结构

1 -.文件目录

2—- node_modules3—- public

4l - favicon.ico:页签图标5lL- index.html:主页面6 —- src

7 ll-- assets:存放静态资源8

i i L-- logo.png9

ll-- component:存放组件

10

l lL-- Helloworld. vue

11

l l-- App.vue:汇总所有组件

12

i i-- main.js:入口文件13

- .gitignore: git版本管制忽略的配置14!-- babel.config.js: babel的配置文件15l-- package.json:应用包配置文件

16- README.md:应用描述文件

17L-- package-lock.json:包版本控制文件

三、

1.vue.js 与vue.runtime.xxx.js的区别

a. vue.js是完整版的Vue ,包含:核心功能+模板解析器

b. vue.runtime.xxx.js是运行版的Vue,只包含核心功能,没有模板解析器

esm就是 ES6 module

2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收

到的createElement函数去指定具体内容

3.1.6. vue.config.js配置文件

vue inspect > output.js 可以查看到Vue脚手架的默认配置

使用vue.config.js可以对脚手架进行个性化定制,和 package.json同级目录,详见配置参考|Vue CLl

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.组件 2.非单文件组件 (.html) 1、Vue中使用组件的三大步骤: 一、定义组件(创建组件) 二、注册组...
    cxyfxr阅读 2,720评论 0 0
  • 初识Vue2.0 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 vue容器里的代码依然符合htm...
    Zindex阅读 3,535评论 0 0
  • vue2笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favico...
    Daydream_许多阅读 1,365评论 0 0
  • 笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico...
    关航_强化班阅读 1,690评论 0 0
  • 笔记 脚手架文件结构 关于不同版本的Vue vue.js与vue.runtime.xxx.js的区别:vue.js...
    sskingfly阅读 1,007评论 0 0