搭建vue项目环境之二(完成基础环境的搭建之后开始正式安装)

由于工作太忙了,一直都是东奔西跑的,好多知识都是零散的,最近刚好有空,就计划利用这个空闲时间认真的整理以前学过的知识,帮助自己回顾过往,中间也难免有很多错误,欢迎指正挑刺。一直以来都是万金油,最后就是啥都会,但是也都是啥都会一点也都不精,逼着自己写成文章也是保障梳理自己知识系统的目的。

  • 搭建vue项目环境

    • 1、全局安装vue-cli

      安装vue2.X

      npm install vue-cli -g

      安装vue3.X

      npm install -g @vue/cli

    • 2、检查是否安装成功

    • 在命令行输入:

    • vue --version

    • 如果输出版本号说明安装成功

    • 3、创建一个基于 webpack 模板的新项目

    • 进入你的项目目录

      cd vuesource

      vue init webpack 项目名

    • 中间会有一些输入提示符的地方,如:

    • ? Generate project in current directory? Yes

      ? Project name test1

      ? Project description test

      ? Author test

      ? Vue build (Use arrow keys)

    • 还有好几个地方,根据提示内容输入就可以也会安装yarn,同意就行,最后会输出如下:

    • > test1@1.0.0 lint

      > eslint --ext .js,.vue src test/unit test/e2e/specs --fix

      sh: eslint: command not found

      Project initialization finished!

      ========================

      To get started:

      npm run dev

      Documentation can be found at https://vuejs-templates.github.io/webpack

    • 到这个时候还不能着急,还继续后面的依赖项要安装

    • 4、安装依赖

    • npm i这个命令即可

    • 此时项目文件列表如下:

    • README.md music-website-master static

      build node_modules test

      cesium-main package-lock.json vueworkplace

      config package.json

      index.html src

    • 多了node_modules这个文件夹。

    • 5、启动项目

    复制代码
      $ npm install -g vue-cli
      $ vue init webpack my-project
      $ cd my-project
      $ npm install
      $ npm run dev
    • 即可以,出现:

    • > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

      (node:10611) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.

      (Use `node --trace-deprecation ...` to show where the warning was created)

      12% building modules 24/28 modules 4 active ...se/Desktop/source/vuetest/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

      95% emitting n

      DONE Compiled successfully in 2664ms

    • 即表明成功

相关推荐
tedcloud1233 小时前
UI-TARS-desktop部署教程:构建AI桌面自动化系统
服务器·前端·人工智能·ui·自动化·github
UXbot6 小时前
AI原型设计工具如何支持团队协作与快速迭代
前端·交互·个人开发·ai编程·原型模式
ZC跨境爬虫7 小时前
跟着MDN学HTML_day_48:(Node接口)
前端·javascript·ui·html·音视频
PieroPc9 小时前
CAMWATCH — 局域网摄像头监控系统 Fastapi + html
前端·python·html·fastapi·监控
巴巴博一10 小时前
2026 最新:Trae / Cursor 一键接入 taste-skill 完整教程(让 AI 前端告别“AI 味”)
前端·ai·ai编程
kyriewen10 小时前
半夜三点线上崩了,AI替我背了锅——用AI排错,五分钟定位三年老bug
前端·javascript·ai编程
kyriewen10 小时前
我让 AI 当了 24 小时全年无休的“毒舌考官”
前端·ci/cd·ai编程
hexu_blog10 小时前
vue+java实现图片批量压缩
java·前端·vue.js
IT_陈寒11 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端