Vue项目快速搭建

准备

  • git-bash命令行工具
  • Node.js环境
  • npm包管理工具
  • webpack打包工具
  • Vue-Cli脚手架工具

搭建步骤:

  1. 打开git-bash,先进入项目存储目录,例:

    cd C:\vue
    
  2. 执行命令初始化vue项目

    vue init webpack demo
    

    在上述命令中,demo表示项目名称,可以根据需要自定义名称。程序会自动在当前目录下创建demo子目录作为项目目录 ,webpack表示项目的模板。

  3. 在创建项目时,程序会询问项目的一些配置选项,直接按回车键使用默认值即可。

  4. 切换到项目目录,启动服务

    cd demo
    npm run dev
    

    执行命令成功会看到如下提示信息:

    Your application is running here: http://localhost:8080
    
  5. 访问项目:在浏览器地址栏输入http://localhost:8080

    image-20210710174523448

demo目录结构:

目录结构 说明
build 项目构建(webpack)相关代码
config 配置文件目录
node_modules 依赖模块
src 源码目录
static 静态资源目录
test 初始测试目录
index.html 首页入口文件
package.json 项目配置文件
README.md 项目说明文档

参考文档

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注