[基础/入门]vue环境搭建

安装Node.js

安装node

进⼊官⽹安装LTS⻓期⽀持版https://nodejs.org/en/

image.png

验证版本

验证版本是否正确

node -v

安装全局脚手架

安装Vue cli（vue脚手架）终端输⼊：
vue-cli2.x脚手架安装命令：

sudo npm install -g vue-cli

vue-cli3.x~vue-cli4.x脚手架安装命令：

sudo npm install -g @vue/cli

vue版本验证

vue -V

验证vue版本

至此node和vue脚手架已经安装完成

创建项目

截至目前不排除还有的公司或者项目依旧在使用低版本得脚手架，我这里分别介绍vue-cli2以及vue-cli3以上得项目创建方法

vue-cli2.x

#⼩写英⽂+驼峰命名法
vue init webpack demo_test

项目创建结果

至此vue-cli2.x脚手架项目创建完成

image.png

vue-cli2.x目录介绍（摘自互联网，侵删）

image.png

创建vue-cli3.x~vue-cli4.x项目

vue create project-demo

选择更多配置

根据自己得需求通过空格选择自己需要得配置项，以下是我根据自己的实际项目需求进行创建，仅供参考

image.png

因为目前大部分项目依旧使用的是vue2的项目我这里选择vue2.x（小白注意vue2.x跟vue-cli2.x不是同一个东西）

image.png
路由模式可以选择history和hash,根据自己的实际情况和需要进行选择
关于history以及hash模式的区别以及使用，暂不过多解释，改天我会新开一篇文章进行讲解
image.png

• 选择css预处理器

  
  image.png

• 选择代码风格

  
  image.png

• 选择代码检查器

  
  image.png
  

  剩余部分分别选择默认回车即可
  至此vue-cli3.x~vue-cli4脚手架项目创建完成
  vue-cli3.x目录介绍（摘自互联网，侵删）

  
  image.png