035_vue脚手架

1. vue脚手架介绍

1.1. vue脚手架用于快速创建Vue项目的基础架构。

2. 安装Vue脚手架

2.1. 使用命令: npm install -g @vue/cli, 安装Vue脚手架。

2.2. 安装完成, 查看C:\Users\用户名\AppData\Roaming\npm目录

2.3. 使用命令: vue -V, 查看脚手架版本, 报错: \npm\vue.ps1, 因为在此系统上禁止运行脚本。

2.4. 以管理员身份运行PowerShell

2.5. 执行: set-ExecutionPolicy RemoteSigned(签名或运行这些脚本)

2.6. 使用命令: vue -V, 查看脚手架版本。

3. 基于交互式命令行的方式创建vue项目

3.1. 使用命令: vue create my-vue-project创建vue项目

3.2. 通过上下箭头键可以切换选项, 切换到手动选择Vue版本和模块, 按回车键切换下一步

3.3. 使用空格键可以选择我们需要的模块, 小括号有*的就是我们选择的模块, 按回车键切换下一步

3.4. 选择3.x的版本

3.5. 不使用历史模式的router, 我们使用hash模式的router

3.6. 使用标准版本的ESLint

3.7. 进行ESLint语法校验的时机

3.8. 使用不同的配置文件, 配置模块

3.9. 是否保存本次选项作为未来创建工程的一个模板, 我们选择否

3.10. 创建完成

3.11. 进入项目目录, 使用命令npm run serve运行项目

3.12. 运行成功

3.13. 在浏览器访问http://localhost:8080/

4. 基于图形化界面的方式创建vue项目

4.1. 使用命令vue ui, 打开图形化界面

4.2. 在浏览器中创建项目

4.3. 点击创建按钮, 选择创建项目的路径, 然后点击在此创建新项目

4.4. 起一个项目名称, 包管理器使用默认的即可, 我们不使用git, 点击下一步按钮

4.5. 选择手动配置项目, 点击下一步按钮

4.6. 选择如下功能, 点击下一步按钮

4.7. 选择如下配置, 点击创建项目按钮

4.8. 保存一个预设, 下一次创建项目就会直接选择我们之前的选项, 点击保存预设并创建项目按钮

4.9. 创建完成

4.10. 点击任务——>serve——>运行, 启动项目

4.11. 启动成功, 点击启动app按钮

4.12. 访问项目

4.13. 创建完成的项目目录分析

4.14. 项目文件详细分析

5. 通过vue.config.js文件, 配置项目

5.1. 在项目根目录下创建vue.config.js

5.2. 在vue.config.js文件中, 配置自动打开浏览器和端口号

5.3. 在终端中运行: npm run serve命令

5.4. 自动打开浏览器访问

035_vue脚手架相关推荐

要在 create-react-app 脚手架里使用 less 的方法
要在 create-react-app 脚手架里使用 less 的方法: 在 powershell 里暴露脚手架配置 yarn eject 在暴露的 config 文件里面打开 webpack.con ...
用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
国内 Java 开发者必备的两个神器：Maven国内镜像和Spring国内脚手架
虽然目前越来越多的国产优秀技术产品走出了国门,但是对于众领域的开发者来说,依然对于国外的各种基础资源依赖还是非常的强.所以,一些网络基本技能一直都是我们需要掌握的,但是速度与稳定性问题一直也都有困扰着 ...
vue 引入的方法用在template_?【有手就行】轻松打造属于自己的Vue工程化脚手架工具...
前言为什么闲得蛋疼要自己做脚手架官方脚手架工具创建的项目不能马上进行搬砖? 每次创建新项目就得复制粘贴旧项目的配置再CRUD? 能不能自己造个劳资御用的个性化定制版脚手架? 以Vue举例来说,虽然 ...
umi脚手架搭建的项目_15天零成本搭建静态博客，托管于Github Page
博客地址技术栈概览前台:Umi(路由) + Antd(视图) + TypeScript(增加项目可维护性以及规范性) 后台:Umi(路由) + Antd(视图) + TypeScript(增加项目 ...
Java项目:角色权限后台脚手架系统(java+Springboot+Maven+myBaits-Plus+Vue+Element-UI+Mysql)
源码获取:博客首页 "资源" 里下载! Springboot框架+myBaits-Plus+MySQL实现的角色权限后台管理脚手架系统实战项目,实现的是所有系统最基础的后台管理功能 ...
Java项目:后台管理系统脚手架项目(java+SpringBoot+FreeMarker+mysql+JSP)
源码获取:博客首页 "资源" 里下载! 项目描述: 这是一个基于SpringBoot框架开发的后台管理系统脚手架项目.之所以称为脚手架项目,是因为这个项目复用性很强,如果以后有其他 ...
基于 Webpack 3 的 React 工程项目脚手架
基于 Webpack 3 的 React 工程项目脚手架从属于笔者的 Web 前端入门与工程实践,算来已经是笔者 React 技术栈脚手架的第四个迭代版本.更多关于 React 或者前端开发相关的资料 ...
vue-cli脚手架(框架)
一.创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本vue-init webpack myvue #项 ...

035_vue脚手架

035_vue脚手架相关推荐

最新文章

热门文章