手把手教你搭建Vue脚手架

191
1,082 阅读2分钟

Vue官方提供了脚手架, 一套标准的文件夹+文件结构+webpack配置，快速搭建项目基本环境

好处: 搭建脚手架可以让我们实现零配置, 开箱即用, 可以基于它快速搭建项目基本开发环境

1. 安装脚手架 -- 准备

1.1 全局安装@vue/cli模块包

npm i -g @vue/cli

1.2查看是否安装成功

vue -V   //查看版本号 如果显示版本号,表示安装成功

2.安装脚手架 -- 创建项目

2.1 创建项目

vue create 项目名   //项目名不能有大写字母,中文和特殊字符

2.2 选择模板和包管理器, 等待脚手架项目创建完毕

image.png

3.安装脚手架 -- 启动服务

cd进入项目下, 启动内置的webpack本地热更新开发服务器 – 浏览项目页面

cd   上面创建的项目名   //启动内置的webpack本地热更新开发服务器 – 浏览项目页面
npm run serve          //启动webpack热更新服务器

4. 安装脚手架 -- 目录分析

脚手架安装成功后,会在生成文件夹中生成很多文件

image.png

5. 安装脚手架 -- 自定义配置

src 并列处新建 vue.config.js 文件, 写入配置, 重启webpack

module.exports = {
    lintOnSave: false,  //暂时关闭 eslint 
    devServer: {
        port: 3000,   //端口号,不建议修改
        open: true    //自动打开浏览器
    }
    
}

6. 安装脚手架 -- 单vue文件解析

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

image.png

8. 安装脚手架 -- 清理欢迎页面

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

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

到这里脚手架就搭建完成了,感谢大家观看

avatar
文章
阅读
粉丝