脚本宝典收集整理的这篇文章主要介绍了快速创建@vue/cli脚手架,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
►由于我们用webpack自己配置环境很麻烦,需要下载很多包,因此我们可以下载@vue/cli包,直接用vue命令创建脚手架项目;
►那么创建@vue/cli脚手架的好处是什么呢?
➜可以0配置webpack;babel支持;css、less支持;开发服务器支持;
►那接下来我们来讲讲脚手架是如何安装的:
➜目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程
1、全局安装命令:
yarn global add @vue/cli # OR npm install -g @vue/cli
注意: 如果半天没动静(95%都是网速问题), 可以ctrl c (停止重新来 or 换个网重新来)
2、安装好之后可以查看vue脚手架的版本:
vue -V
总结: 如果出现版本号就安装成功, 否则失败;
例如:
☻注意:项目名不能带大写字母、中文和特殊符号(重要)
1、创建项目:
# vue和create是命令, vuecli-demo是文件夹名 vue create vuecli-demo
2、选择模板:
可以上下箭头选择, 弄错了ctrl+c重来
选择用什么方式下载脚手架项目需要的依赖包
3、回车等待生成项目文件夹+文件+下载必须的第三方包们
4、进入脚手架项目下, 启动内置的热更新本地服务器
cd vuecil-demo npm run serve # 或 yarn serve
只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)
打开浏览器输入上述地址 (或者按住ctrl键点击上述地址,也可直接打开浏览器)("http://localhost:8080/")
我们创建好一个项目之后,打开会发现给我们生成了很多的文件夹,那这些文件夹都是干什么的?
vuecil-demo # 项目目录 ├── node_modules # 项目依赖的第三方包 ├── public # 静态文件目录 ├── favicon.ico# 浏览器小图标 └── index.html # 单页面的html文件(网页浏览的是它) ├── src # 业务文件夹 ├── assets # 静态资源 └── logo.png # vue的logo图片 ├── components # 组件目录 └── HelloWorld.vue # 欢迎页面vue代码文件 ├── App.vue # 整个应用的根组件 └── main.js # 入口js文件 ├── .gitignore # git提交忽略配置 ├── babel.config.js # babel配置 ├── package.json # 依赖包列表 ├── README.md # 项目说明 └── yarn.lock # 项目包版本锁定和缓存地址
主要文件及含义:
node_modules // 下都是下载的第三方包 public/index.html // 浏览器运行的网页 src/main.js – // webpack打包的入口文件 src/App.vue – // vue项目入口页面 package.json – // 依赖包列表文件
➔目标: 知道项目入口, 以及代码执行顺序和引入关系
»»» main.js和App.vue,以及index.html作用和关系?
↪1、main.js - 项目打包主入口 - Vue初始化;
↪2、App.vue - Vue页面主入口;
↪3、index.html - 浏览器运行的文件;
↪4、App.vue => main.js => index.html
➜目标:项目中没有webpack.config.js文件,因为@vue/cli用的vue.config.js
src并列处新建vue.config.js:
/* 覆盖webpack的配置 */ module.exports = { devServer: { // 自定义服务配置 open: true, // 自动打开浏览器 port: 3000 // 自定义端口号 } }
➜单vue文件好处, 独立作用域互不影响
创建好项目之后会发现我们有一个src/App.vue的文件夹(如下图:)
打开App.vue之后可以看到代码的结构如下、:
<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 --> <template> <div>欢迎使用vue</div> </template> <!-- js相关 --> <script> export default { name: 'App' } </script> <!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 --> <style scoped> </style>
➜ Vue推荐采用.vue文件来开发项目
➜ template里只能有一个根标签;
➜ vue文件-独立模块-作用域互不影响;
➜ style配合scoped属性, 保证样式只针对当前template内标签生效;
➜ vue文件配合webpack, 把他们打包起来插入到index.html,然后在浏览器运行 ;
➜ 我们开始写我们自己的代码, 无需欢迎页面;
1、src/App.vue默认有很多内容, 可以全部删除留下框:
如下图:
2、assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)
到这里vue项目文件夹就创建好啦,我们就可以在里面开始写自己项目了!
以上是脚本宝典为你收集整理的快速创建@vue/cli脚手架全部内容,希望文章能够帮你解决快速创建@vue/cli脚手架所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。