认识cli
开始安装之前，请确保你的node安装没有问题！！！
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。
安装步骤
1.安装Vue CLI 的包。
npm install -g @vue/cli
2.安装好后输入查看版本，确定是否安装成功。
vue --version 或者 vue -V
3.安装好之后，创建一个文件，在文件中执行下面代码
vue init webpack GP4 在当前文件夹生成一个名称为GP4的文件夹
执行完上面代码之后,出现交互选项，也就是自定义配置，我们进行以下设置
###模板下载好后的交互选项
1.Project name vue-demo # 项目名称，直接回车，按照括号中默认名字
（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
2. Project description A Vue.js project # 项目描述,直接回车
3. Author # 作者名称，默认直接回车
4. Vue build standalone # 一般选择的Standalone(运行时 + 编译器)模式
Runtime + Compiler: recommended for most users；
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML)
areONLY allowed in .vue files - render functions arerequired elsewhere
（一般都选这个Runtime + Compiler: recommended for most users）
5. Install vue-router? Yes # 是否需要 vue-router，路由，一般都需要，输入y敲回车
6.Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
7. Pick an ESLint preset Standard # 一样的ESlint 相关
8. Set up unit tests Yes # 是否安装单元测试
9. Pick a test runner 按需选择 # 测试模块
10. Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
11. Should we run `npm install` for you after the project has been created? (recommended) npm #
包管理器，一般用NPM
4.配置完成后，可以看到目录下多出了一个项目文件夹baoge，然后cd进入这个文件夹。
我们先了解以下文件夹中各项的意义：
文件夹意义.png
src文件夹 .png
文件加载完成之后，我们在cmd中cd进入我们新创建的文件夹。
进入文件夹之后输入以下命令启动项目：
npm run dev 启动项目
执行完代码，出现以下地址，复制进入即可，如果打开浏览器之后页面不加载，可能端口号有冲突，需要修改配置文件中index.js中的port端口号。
image.png
网友评论