Vue.js教程(四)

导读:本篇文章讲解 Vue.js教程(四),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

目录

Vue脚手架 Vue CLI

1:安装

2:创建一个项目

3:Vue脚手架项目文件结构含义

4:Vue初始项目文件

main.js

App.vue

子组件 

 5:Vue配置文件修改


Vue脚手架 Vue CLI

官网:https://cli.vuejs.org/zh/guide

1:安装

npm install -g @vue/cli

Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

2:创建一个项目

vue create hello-world

报错:vue : 无法加载文件xxx 因为在此系统上禁止运行脚本

解决:以管理员身份运行VS Code,在终端输入 set-ExecutionPolicy RemoteSigned 即可。

使用 vue -V 查看 Vue CLI版本

vue -V

Vue.js教程(四)

 然后

cd hello-world

npm run serve

Vue.js教程(四)

打开网页 http://localhost:8080。这样一个 Vue 脚手架项目就创建完成了

Vue.js教程(四)

3:Vue脚手架项目文件结构含义

Vue.js教程(四)

node_modules:项目依赖包,类似Java的Maven仓库

public:公共静态文件目录,不会被webpack构建

src:项目源码包

.gitignore:版本控制git的配置忽略文件

babel.config.js:babel配置文件

jsconfig.json:js项目

package-lock.json:项目依赖版本锁定配置

package.json:vue cli 是依赖在webpack上的,这个就是webpack的配置文件

README.md:项目说明文件

vue.config.js:项目配置文件

4:Vue初始项目文件

  • main.js

整个项目的入口文件

Vue.js教程(四)

  • App.vue

所有⼦组件的⽗组件

Vue.js教程(四)

子组件 

Vue.js教程(四)

 5:Vue配置文件修改

  • Vue的默认配置(修改无效)

vue inspect > output.js                        // 终端输入此命令就会显示出隐藏文件

  • 修改Vue配置

在 vue.config.js 中修改                        // 详细配置请查看官网:https://cli.vuejs.org/zh/config

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/72519.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!