认识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进入这个文件夹。
我们先了解以下文件夹中各项的意义:
文件加载完成之后,我们在cmd中cd进入我们新创建的文件夹。
进入文件夹之后输入以下命令启动项目:
npm run dev 启动项目
执行完代码,出现以下地址,复制进入即可,如果打开浏览器之后页面不加载,可能端口号有冲突,需要修改配置文件中index.js中的port端口号。