vue-cli3.0搭建项目详细步骤

vue-cli 3.0搭建项目

一，安装node.js

安装vue3.0需要node.js 8或者9以上的版本。版本过低需要

二，安装vue-cli3.0

已经安装过vue-cli的可以用：vue --version 或者 vue -V查看版本

vue --version

如果你之已经安装了vue 3.0以下的版本，需要先卸载旧版本，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
重新安装vue-cli

npm install -g @vue/cli

三，安装成功后创建vue项目

3.1 创建vue项目

在终端输入一下指令

vue create project-vue

选择Manually select features自己选择设置

3.2选择要配置的选项

Babel：es6语法装es5
Router： 配置vue-router路由
Vuex：vuex状态管理
CSS Pre-processors： css预处理器

键盘上下键选择要配置的选项，空格选中要配置的选项，回车确认最终选择

3.3配置路由的history模式

这里选择yes

3.4，配置css预处理器

此处选择Sass/SCSS(with dart-sass)也可以不选择，然后回车继续下一步

3.5，选择ESLint规则

选择ESLint语法检测工具，这里我直接默认选择，看自己的需要

3.6，是否将配置项保存为预设

继续默认选中，按下回车

3.7，接下来会问你把babel,postcss,eslint这些配置文件放哪

选择存放的文件位置

3.8，最后选择是否记录这一次配置，下次是否继续使用

这里我选择了yes，命名为default

四，配置完成后开始搭建项目

输入npm run serve运行项目

打开浏览器输入地址http://localhost:8080/
出现vue界面，项目搭建成功。