vue从弃坑到抗战——动手搭建本地环境

常言道：人在江湖，身不由己。

公司决定用vue做前后端分离项目，定睛一想：确也是当今走向。。。

1.安装Node.js

    https://nodejs.org/zh-cn/

    初次安装node，需配置环境变量（此处略，不会问度娘吧），以后更新node版本就不用再配置了

    配置好环境变量，在cmd里输入：node -v，可查看当前node版本

    

    能看到版本号，就说明配置成功了

    

2.基于node.js，安装npm

    在cmd里输入：npm install

    这里不建议安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

诚然淘宝镜像会提升后续安装依赖的速度，但也有可能报莫名其妙的错误（个人练习项目就无所谓啦）

因此如果无线安装速度过慢，建议插网线。

    

    同理，npm -v 查看当前npm版本：

    

3.全局安装webpack

    npm install -g webpack（如果安装了淘宝镜像，则可将npm替换为cnpm，后续同理）

    此处的 -g 是 -global 的缩写，代表全局安装，后续同理

    install 也可以缩写为 i （即 npm i -g webpack）

    

4.全局安装 vue-cli 脚手架

    如果说练习vue语法尚可不用脚手架，但在项目中无论如何都逃不开的

    npm install -g vue-cli

5.创建vue项目（终于可以创建项目啦！）

    步骤：

    ① 打开你希望项目在何处创建的目录 

    ② 按住shift，鼠标右键在此处vue init webpack vue_test（项目文件夹名）

         如下图，确保在你希望的目录下创建项目（熟悉命令行语法也可用cd:进入目录）

        

    ③ 接下来是一些确认项，比如项目名称，作者名称，等等

        除了Eslint，都建议一路回车

      

        ESLint 保证语法正确、风格统一，其规范相较传统JS严格许多。如果不熟悉其规范，很可能满篇爆红让你崩溃。建议新手在Eslint打n

        “Should we run ` npm install ` for you after the project has been created?”

             ——安装新项目最后会有这样1句话， 意思是安装项目所需要的npm依赖 ，同样回车选择yes

            —— 线上拉取他人项目时，需要在该项目目录里npm install

    ④ 一路回车后，在刚才选择的文件夹自动生成项目目录

        

        项目目录里。绝大多数情况项目出现问题时，删掉该目录并重新npm install即可

        

        ⑤ 进入项目目录（test），npm run dev

            

            DONE即表示运行成功，复制地址到在本地浏览器即可

            绝大多数报错会在该界面显示，并且无法在浏览器运行项目

            （如果是Eslint报的错，则不影响在浏览器运行）

            

        Welcome to Vue! ——vue项目搭建至此成功！

任何问题和项目相关，欢迎留言&交流！