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

  • 即表明成功