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

    • 即表明成功

相关推荐
ekskef_sef13 分钟前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine64138 分钟前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻1 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云1 小时前
npm淘宝镜像
前端·npm·node.js
dz88i81 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr1 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
程序员_三木1 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
顾平安2 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网2 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工2 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染