Vue 自定义项目的创建以及配置
1、准备工作
1、打开cmd，输入node -v查看node版本
（如果没有安装node需要先安装node。node下载地址：http://nodejs.cn/）
node -v
2、cmd中输入 npm -v 查看npm版本
npm -v
3、使用npm安装Vue CLI （npm下载较慢可以使用cnpm）
npm install -g @vue/cli
或
yarn global add @vue/cli
4、输入 vue -v 查看是否安装完成（安装成功会显示版本）
vue -v
2、创建项目
1、创建项目。
在cmd中移动到想要创建的目录下
vue create 项目名
2、自定义配置
1、选择版本。上下键选择版本，然后回车。（这里选择最后一个演示，选择vue3或者vue2会自动安装）
（Manually select features 手动选择功能）
2、选择要安装的资源 ，选完回车。
（上下键移动，空格选中，带星号即为选中）
1.Babel 这个是ES6的转换器，因为ES6是质变的一代，这个插件能够帮你把代码转换成ES5以前，现在基本没啥用。
2.TypeScript 这是微软的相当于一个javascript的增强吧，这里也用不上
3. Progressive Web App (PWA) Support 这个是要做App的一个支持的插件，这个要用的可以选上
4.Rounter 这个是路由
5.Vuex 这个是用于Vue状态管理的
6.CSS Pre-processors 这个是用来优化css文件 让那些sass和less的文件可以一同被打包到最终的项目里，有webpack基础的可能有点感触
7.Linter / Formatter 这个是用来检查代码规范的
8.Unit Testing 单元测试 有软件测试基础的同学可能会用到 其他大概率也用不上
9.E2E Testing 端到端测试 和上面一样 不搞测试的同学都用不上
此处参考链接：https://blog.csdn.net/Super_hzj/article/details/118968349
3、选择vue版本
上下键移动，然后回车
4、选择是否使用历史的路由，然后回车
路由两种模式，自行选择 Y 或 N
1、history模式
2、hash模式
5、代码检查设置，选择规范
上下键切换，回车进行选择
第一个是只报错，不规范
第二个是符合airbnb规范
第三个是standard规范
第四个是这个prettier规范
参考链接：VS Code使用Vetur插件+.prettierrc.js配置格式化规范
(这里我选择standard的是 ESLint + Standard config)
6、代码检查设置，检查时间点
保存时检查和提交时检查
7、第三方配置文件设置
这个是问你你的这些插件/组件要放在哪个文件里
第一个是放在一个独立的文件里
第二个时放在默认生成的package.json里
8、是否保存之前的设置
来到这个页面，问你之前这些配置是否保存，若保存，下次再配置时，就会和这次一样的配置内容
9、保存的文件名
上一步选择保存设置后，会询问你保存设置的文件名，自行取名。
然后回车，就能生成项目啦！
之后再次创建项目时就有刚刚保留配置的文件啦（我刚刚保存配置的文件名 vue02config）
3、运行项目
安装完成后会在cmd中弹出以下两个命令，依次输入可运行项目
cd vue02 移动至该项目目录下
yarn serve 运行项目（要先移动至项目目录下才能运行）
随后就能访问项目：http://localhost:8080/
Vue 自定义项目的创建以及配置相关推荐
- vue搭建项目、创建登录页面和后台交互之引入axios
目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2 ...
- 一个 Web 项目的创建及配置（完整版）
打开你的idea: 1.新建一个Maven项目: 下面这两种情况任选其一: 然后再弹出的窗口中先选择 Maven,在点 next: 选择你项目所要存储的位置,以及项目名:(点击 Finish) 2.配 ...
- 测试平台——项目工程创建和配置
这里写目录标题 一.配置开发环境 二.配置MySql数据库 三.配置工程日志 一.配置开发环境 项目的环境分为开发环境和生产环境. 开发环境:用于编写和调试项目代码. 生产环境:用于项目线上部署运行. ...
- vue自定义指令的创建和使用
1.bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. 2.inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于docum ...
- vue项目创建及配置选择
前言 vue是一套用于构建用户界面的渐进式框架.我使用vue最直观的感受就是它组件化开发的高效率和高复用.接下来我将讲述从从零搭建vue框架.以下观点带有个人理解,有不对的地方请指正. 环境需求 在我 ...
- Vue CLI 3 安装、创建、配置、安装插件
一.安装 1.全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它: npm uninstall vue-cli -g //或者 yarn global remove vue-cli 注 ...
- 使用vue-cli创建Vue工程化项目及单文件组件的创建和调用
文章目录 1. Vue 单文件组件的优势 2. cli 创建 Vue 工程项目 3. 单文件组件的创建和调用 1. Vue 单文件组件的优势 把一个组件全部内容汇合到一个文件中,文件名字是以 .vue ...
- react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
- react打包后图片丢失_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
- 安装Vue CLI项目（Vue2.0）
一.Vue CLI脚手架(Vue2.0) Vue CLI官方文档:官方文档 1.什么是脚手架 命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及 ...
最新文章
- BeautifulSoup解析库详解
- 助你成长为优秀的程序员 杰出的软件工程师、设计师、分析师和架构师
- 【python基础】用字典做一个小型的查询数据库
- ClickHouse 数据存储原理：MergeTree引擎
- 一文带你了解Java Agent
- 前端学习（2051）vue之电商管理系统电商系统之开启gzip文件传输
- 138 张图带你 MySQL 入门！
- Brew安装MacVim
- SpringCloud微服务架构学习（二）常见的微服务架构
- 在ubuntu14.04中安装及测试OpenCV
- 数据库之ODPS中sql语句指南
- 使用xcode4做ios的国际化
- 3，ActiveMQ-入门（基于JMS发布订阅模型）
- SQLSERVER月份简写转数字
- adb删除软件_苹果免越狱如何安装ipa 苹果免越狱安装软件安装教程【详解】
- CPU后面字母究竟是啥？
- 计蒜客第七章：互粉攻略
- STM32学习1——环境搭建
- FPGA解码4line MIPI视频 IMX291/IMX290摄像头采集 提供工程源码和技术支持
- Excel中金额小写转大写，职场小技能，值得学习