VUE-6-4 VUE脚手架

最新推荐文章于 2024-11-12 10:19:40 发布

原创最新推荐文章于 2024-11-12 10:19:40 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

前端代码记录专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用 Vue CLI 构建项目，包括安装配置、项目初始化、运行及使用 webpack 模板等内容。通过 vue-cli 可快速生成项目结构，并进行代码规范检查和单元测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简介

vue-cli是一个vue脚手架，可以快速构造项目结构
vue-cli本身集成了多种项目模板：
    simple  很少简单
    webpack 包含ESLint代码规范检查和unit单元测试等
    webpack-simple 没有代码规范检查和单元测试
    browserify 使用的也比较多
    browserify-simple

2示例

2.1安装vue-cli,配置vue命令环境

vue list会展示出全部模板

cnpm install vue-cli -g
vue --version
vue list

2.2 初始化项目，生成项目模板

语法：vue init 模板名  项目名

2.3 进入生成的项目目录，安装模块包

cd vue-cli-demo
cnpm install

2.4 运行

npm run dev  //启动测试服务
npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

3. 使用webpack模板

vue init webpack vue-cli-demo2

ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格

官网

问题Bug：如果版本升级到node 8.0 和 npm 5.0，控制台会报错：
    GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
解决方法：
    a)降低Node版本到7.9或以下
    b)修改build/dev-server.js文件，如下：
        var hotMiddleware = require('webpack-hot-middleware')(compiler, {
          log: () => {},
          heartbeat:2000 //添加此行
        })
    参考：https://github.com/vuejs-templates/webpack/issues/731

2使用webpack模板

vue init webpack vue-cli-wkh

不选vue-router

ESLint是用来统一代码规范和风格的工具，要求比较严格，缩进、空格、符号等

build里面是配置文件

assets:相关资源

components:组件