vue2脚手架搭建

本文介绍了如何使用vue-cli创建Vue2项目,包括全局安装vue-cli和webpack,初始化项目,下载依赖,启动项目,以及项目打包和发布的详细步骤。在创建过程中,强调了Eslint的选择,并列举了不同服务器的创建和启动方式。
摘要由CSDN通过智能技术生成

创建一个vue项目:
1,全局安装vue命令行模块 vue-cli
    npm install vue-cli -g
注意:vue-cli 依赖于webpack,在使用vue-cli之前,先安装webpack   
    npm install webpack -g

2,创建项目文件夹,并在这个文件夹下打开命令行

3,初始化一个vue项目
    vue init webpack
注意: 其中Eslint 选项是代码格式校验工具, 要选择NO ,否则会以严格模式校验代码,
如: 注释//后必须有且只有一个空格, 否则会报错

4,下载安装所有的依赖项
    npm install

5,启动项目
    npm run dev   

    在vue项目根目录下,index.html就是项目的首页,其他文件是项目的各种配置文件。
    static文件夹,是存储静态资源文件的静态文件夹(类似于express项目中的public)
    src文件夹,是存储项目源代码的文件夹(类似express项目中的bin),所有前端的代码文件都存储在src中。
    build文件夹,用于存放webpack项目打包的配置文件。
    config文件夹,存放服务器的配置文件。
    除了src文件夹,其他文件夹中的内容基本不用修改。
    开发vue项目,主要就是在src中写代码。

6,当项目完成时,如何打包发布?
(1)打包:项目开发完成之后,代码行执行命令
    npm run build
 编译并重新构建项目,然后在项目目录下生成一个 dist 文件夹
(2)发布: 只需要将dist文件夹中的所有内容复制到服务器(IIS / node / apache)的静态文件夹中即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值