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

    • 即表明成功

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way6 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github