搭建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

    • 即表明成功

相关推荐
国服第二切图仔1 分钟前
12-Web工具
大数据·前端
爱分享的程序猿-Clark14 分钟前
【前端分享】大前端监控体系搭建实战
前端
夕除15 分钟前
sign 是什么
java·前端
An_s27 分钟前
Android仿真翻页(一),基于pagecurl二开
前端·javascript·html
weixin_4629019740 分钟前
网页 HTML ↔ ESP32 完整通信体系详解
前端·html
禅思院40 分钟前
Agent记忆管理,是一场工程上的平衡艺术
前端·架构·ai编程
crary,记忆1 小时前
React Hook 浅学 2.0 - 自定义Hook
前端·react.js·前端框架
触底反弹1 小时前
🔥 React 零基础入门(下):Props + State + useEffect 生命周期深度解析
前端·react.js·面试
咖啡星人k1 小时前
GitHub Copilot 加入 Agent 浏览器:验证 Web 应用进入编码闭环
前端·人工智能·github·copilot·前端开发·ai agent
Shadow(⊙o⊙)1 小时前
高并发内存池:Part-1——定长内存池
java·前端·javascript