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

欢迎关注前端小讴的github，阅读更多原创技术文章

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

公司决定用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项目搭建至此成功！

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