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

woshidaniu2023-08-27 17:39

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

搭建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
- 即表明成功

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

安装vue2.X

安装vue3.X

进入你的项目目录

Project initialization finished!

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