MacOs使用vue3.0+建立项目

1.安装node.js和npm

首先安装node.js（送一个npm），官网下载傻瓜式安装，能够查看node和npm的版本，正确出现版本号即安装成功

node -v
npm -v复制代码

2.安装vue脚手架工具（MacOs）

sudo npm install -g @vue/cli复制代码

注意：3.0+版本的cli工具和2.0+版本的安装方法不同，mac下注意加上sudo，输入电脑密码便可，不然可能会报错。

安装完成后能够查看vue的版本，出现版本号即安装成功

vue -V  //注意V是大写
复制代码

3.建立项目

vue3.0提供了两种建立项目的方式，一是传统的命令行建立，二是提供了可视化的建立。

3.1可视化建立

vue ui //可视化建立，会打开浏览器，在显示的页面中进行建立便可，不作过多叙述复制代码

3.2命令行建立

1.建立命令 vue create myproject

2.第一项为默认配置，这里咱们按下键盘方向键，选择第二个 Manually select features。

vue3.0+能够在建立项目的时候根据本身的须要定制本身的vue项目，这里我选择router和CSS预编译，选择完成后按下回车。

注意选择配置项的时候不要按回车，不然会直接到下一步，这里按方向键移动，按空格键选择须要添加的配置。（回车是肯定，空格是选中）

3.3其余配置项

如图所示

3.4配置项说明

-Use history mode for router? (Requires proper server setup for index fallback in production) No  

通常选no

-Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 

预编译：可根据本身须要选择sass、less、stylus

-Pick a linter / formatter config: Prettier   

代码风格

-Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save  

通常选择lint on save

-Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files  

两个均可以

-Save this as a preset for future projects? Yes  

是否将此次的配置做为之后项目的模板（选择yes后下次建立项目会直接按本次耐模板建立）

-Save preset as: myproject 

保存的本次模板的名字

选择完配置项后一路回车便可建立项目，建立完成后进入项目目录，启动项目便可

注意：启动命令和2.0+版本不一样

此时访问localhost:8080便可看到vue项目了。

第一次写博文记录学习过程，如有错误，敬请指正。