@vue/cli脚手架的安装
文章目录
webpack自己配置环境很麻烦,下载@vue/cli包,用vue命令创建脚手架项目
@vue/cli是vue官方提供的一个全局模块包(vue命令),此包用于创建脚手架项目
好处
0配置webpack
babel支持、
css,less支持
开发服务器支持
安装
把@vue/cli模块包安装到全局,电脑拥有vue命令,才能创建脚手架工程
全局安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看版本
vue -V
如果出现版本号,安装成功,否则失败
@vue/cli创建项目启动服务
使用vue命令创建脚手架项目(项目名不能带大写字母,中文和特殊符号)
创建项目
//vue create 是命令 vuecli-demo是文件夹名
vue create vuecli-demo
设置镜像
会提示是否使用淘宝镜像安装,这里输入y然后回车
Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation?
选择模板
可以上下箭头选择,弄错了ctrl+c 重来
回车,等待生成项目文件夹+文件+下载必须的第三方包
进入脚手架项目,启动内置的热更新本地服务器
cd vuecli-demo
npm run serve
or
yarn serve
启动成功了(底层node+webpack热更新服务)
打开浏览器输入上述地址
@vue/cli目录和代码分析
vuecli-demo #项目目录
node_modules 项目依赖的第三方包
public 静态文件目录
index.html 但页面的html文件(网页浏览的就是它)
src 业务文件夹 &****
assets 静态资源
components 组件目录
HelloWorld.vue 欢迎页面的vue代码文件
APP.vue 整个应用的根组件
main.js 主入口文件
.gitignore git提交忽略的配置
babel.config.js babel配置
package.json 依赖包列表
README.md 项目说明
vue.config.js vue的配置文件
主要文件及含义
node_modules 下都是下载的第三方包
public/index.html ---浏览器运行的网页
src/main.js webpack打包的入口文件
src/App.vue vue项目入口页面
package.json 依赖包列表文件
vue.config.js vue的配置文件
@vue/cli项目架构了解
知道项目入口,以及代码执行顺序和引入关系
@vue/cli自定义配置
项目中没有webpack.config.js文件,应为@vue/cli用的vue.config.js
module.exports = defineConfig({
// 覆盖webpack的配置
devServer: {
//自定义服务配置
open: true, //自动打开浏览器
port: 3000,
},
})
eslint了解
- main.js随便声明一个变量,但是使用,终端和页面都报错了
- 代码步严谨
在这里插入图片描述
解决:
1:手动解决掉错误,后面项目中会讲如何解决
2:暂时关闭eslint检查,在vue.config.js中配置后重启服务
module.exports = defineConfig({
...
lintOnSave: false, // 关闭eslint检查
transpileDependencies: true,
})
@vue/cli单文件
单vue文件好处,独立作用域互不影响
-
vue推荐采用.vue文件来开发项目
-
template里只能有一个根标签
-
vue文件-独立模块 --作用域互不影响
-
style配合scoped属性,保证样式只针对当前template内标签生效
-
vue配合webpack,把他们打包起来插入到index.html
// template 只能有一个根标签
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
// 当前组件的样式 设置scoped 可以保证样式只对当前页面有效
<style scoped>
</style>
@vue/cli欢迎界面清理
-
src/App.vue 默认有很多内容,可以全部删除(然后输入vb快捷生成代码框架[前提是要安装了下面的插件])
-
assets和components文件夹下一切都删除掉(不要默认的欢迎页面)
vscolde插件补充
vue文件代码高亮插件
代码提示插件
快速生成框架代码
脚手架项目中定义全局过滤器
过滤时间格式
- 项目中下载monment模块
yarn add moment
-
main.js引入monment并创建全局过滤器
import moment from 'moment' // 全局过滤器 Vue.filter('formData', (val) => { return moment(val).format('YYYY-MM-DD h:mm:ss') })
-
项目中的任何一个vue文件都可以使用
{{ obj.time | formData }}