vue-cli(vue脚手架)超详细安装教程

认识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

注:dev 就是开发环境的启动命令,如果大家在安装中遇到问题,欢迎在留言区留言,我们可以一起解决。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。