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

这篇具有很好参考价值的文章主要介绍了搭建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
- 即表明成功文章来源地址https://www.toymoban.com/news/detail-665417.html