提升技术之路：【脚手架】vuecli的基本搭建使用【Vue项目搭建】

1.脚手架-介绍与安装

webpack自己配置环境繁琐官方提供脚手架, 快速搭建项目基础结构

安装@vue/cli全局模块包, 得到Vue命令, 用于以后创建Vue脚手架项目

步骤:

1.全局安装@vue/cli模块包

yarn global add @vue/cli

或者 npm install -g @vue/cli

2.查看版本号

 2.脚手架-创建项目-启动服务

1.创建项目：vue create vuecli-demo（项目名）

然后中途有一些类似的什么配置自己选一下就好了（按上下左右键）

2.选择模板

 

3.选择包管理器

4.等待下载脚手架项目, 需要的依赖包

 5. cd进入目录下进行启动，终端切换脚手架项目下, 启动内置的==webpack热更新开发服务器 执行下面的命令

cd vuecil-demo

npm run serve

 6.如果未自动弹出浏览器页面，则手动打开输入Local或Network的内容就好了

 7.vscode中出现如下文件夹结构

目标：文件夹和文件含义，关键文件里代码的意思 

 

主要文件及含义:

node_modules – 第三方依赖包

public/index.html – 浏览器运行的网页

src/main.js – webpack打包的入口文件

src/App.vue – Vue入口页面

package.json – 依赖包列表文件和自定义命令

在main.js页面引入了./App.vue页面

在./App.vue写代码

通过el挂载到public/index.html页面

8.自定义配置 (端口号) 一般不建议修改

vue脚手架的配置文件目录 : vue.config.js

src文件夹 并列处 新建vue.config.js, 填入配置, 重启webpack开发服务器

如需修改端口号:

devServer: {

port: 3000, // 端口号

open: true // 启动后自动打开浏览器

}

9.脚手架-eslint了解

eslint是代码检查的工具

如果写代码违反了eslint的规则-报错

配置 ： lintOnSave:false//true

 10:脚手架-单vue文件

Vue推荐采用.vue文件来开发项目
template里只能有一个根标签 ( vue2 特性)
vue文件-独立模块-作用域互不影响
style配合scoped属性, 保证样式只针对当前template内标签生效
vue文件配合webpack, 把他们打包起来插入到index.html

11.脚手架-清理欢迎界面

⚫ assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

⚫ src/App.vue默认有很多内容, 可以全部删除留下template和script和style的框

欢迎界面是哪些? 如何清除?

➢ assets下图片和components下的文件

➢ App.vue文件里代码留下个框

原文链接：https://blog.csdn.net/FellAsleep/article/details/123022281