@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目

一、创建脚手架项目

1.全局安装命令

2.查看vue脚手架版本

3.@vue/cli 创建脚手架项目-启动

3.1 创建项目

3.2 选择模板

3.3 回车生成文件

3.4 进入项目启动文件

二、vue脚手架文件说明

1.目录和代码分析

2.主要的3个文件和关系

三、vue/cli自定义配置

1.自定义服务配置

2.eslint暂时关闭设置

四、单vue文件开发

五、清空脚手架欢迎界面

一、创建脚手架项目

1.全局安装命令

yarn global add @vue/clinpm install -g @vue/cli

2.查看`vue`脚手架版本

如果出现版本号就安装成功, 否则失败

vue -V

3.@vue/cli 创建脚手架项目-启动

项目名不能带大写字母, 中文和特殊符号

3.1 创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

3.2 选择模板

可以上下箭头进行选择, 选错了用ctrl+c重来

选择用什么方式下载脚手架项目需要的依赖包

3.3 回车生成文件

回车等待生成项目文件夹+文件+下载必须的第三方包们

3.4 进入项目启动文件

进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demonpm run serveyarn serve

打开浏览器输入上述地址

二、vue脚手架文件说明

1.目录和代码分析

vuecil-demo --- 项目目录

.git --- vue官方仓库拷贝的 ( 删除掉即可 )

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 --- 项目包版本锁定和缓存地址

2.主要的3个文件和关系

main.js - 项目打包入口 - Vue初始化
App.vue - Vue页面入口
index.html - 浏览器运行的文件

App.vue => main.js => index.html

三、vue/cli自定义配置

1.自定义服务配置

在vue.config.js配置自动打开浏览器

/* 覆盖webpack的配置 */
module.exports = {devServer: { // 自定义服务配置open: true, // 自动打开浏览器port: 8081}
}

2.eslint暂时关闭设置

eslint是代码检查工具，违反规定就报错

在vue.config.js中设置lintOnSave为false重启服务器即可

module.exports = defineConfig({//其他配置lintOnSave: false,
})

四、单vue文件开发

单vue文件好处, 独立作用域互不影响

Vue推荐采用.vue文件来开发项目

template里只能有一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template><div>欢迎使用vue</div>
</template><!-- js相关 -->
<script>
export default {name: 'App'
}
</script><!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

五、清空脚手架欢迎界面

assets下图片和components下的文件删除即可，留下Vue项目入口页面App.vue文件初始代码

<template></template><script>
export default {}
</script><style></style>

vue创建脚手架项目相关推荐

vue创建脚手架 cil
1.检查环境是否安装好了! node -v npm -v npm install cnpm -g --registry=https://registry.npm.taobao.org cpm -v ( ...
vue创建脚手架时常见的报错
我们在创建脚手架结构时,会出现很多的报错:为此我搜集了一些常见的报错: 1. error Mixed spaces and tabs no-mixed-spaces-and-tabs 这个报错代表缩进 ...
vue创建新项目的具体步骤
1,安装node 下载地址:https://nodejs.org/en/ 左侧 LTS 版本为稳定版,建议下载:右侧 Current 为最新版,有些新功能可能会出现 bug. 2,安装cnpm npm ...
vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。...
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
vue创建新项目遇到~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode问题解决办法
到C:\Users\用户目录下面把vuerc文件删除掉就可以了
Vue脚手架创建的项目的启动流程
Vue脚手架创建的项目的启动流程当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析首先从package.json中的脚本配置来看,np ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
创建一个vue脚手架项目
首先 ,创建脚手架需要安装vue-cli 安装vue-cli就需要npm 所以第一步需要安装Node.js 安装好后,查看版本之后在想要放项目的地方cmd ,安装脚手架 npm install -g ...
创建vue项目+总结使用(跨域问题+vue 创建)
创建vue项目: -安装node.js-vue脚手架-vue create 项目名字pycharm开发vue项目-需要安装vue.js插件-setting--->plugins--->左下 ...

vue创建脚手架项目

一、创建脚手架项目

1.全局安装命令

2.查看`vue`脚手架版本

3.@vue/cli 创建脚手架项目-启动

3.1 创建项目

3.2 选择模板

3.3 回车生成文件

3.4 进入项目启动文件

二、vue脚手架文件说明

1.目录和代码分析

2.主要的3个文件和关系

三、vue/cli自定义配置

1.自定义服务配置

2.eslint暂时关闭设置

四、单vue文件开发

五、清空脚手架欢迎界面

vue创建脚手架项目相关推荐

最新文章

热门文章