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

    • 即表明成功

相关推荐
好家伙VCC1 天前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务1 天前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
baidu_247438611 天前
Android ViewModel定时任务
android·开发语言·javascript
嘿起屁儿整1 天前
面试点(网络层面)
前端·网络
VT.馒头1 天前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
有位神秘人1 天前
Android中Notification的使用详解
android·java·javascript
phltxy1 天前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron07071 天前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js
css趣多多1 天前
地图快速上手
前端
zhengfei6111 天前
面向攻击性安全专业人员的一体化浏览器扩展程序[特殊字符]
前端·chrome·safari