每一次新下载配置一个新的东西都会出现各种奇奇怪怪的问题，配置好几次，以此记录。

组件

把一个页面拆分成一堆组件，每个组件都有自己的html、css

作用：简化项目编程，复用编码，提高运行效率

单文件组件

定义: 一个文件中包含1个组件

.vue文件无法直接在浏览器使用,需要借助vue的脚手架

vue脚手架是什么？

脚手架：可以理解为自动帮我们构建项目的工具。

vue的自动化构建工具是node.js，所以需要下载node.js

开发环境

Vue推荐开发环境:

Node.js JavaScript运行环境,
Npm Node.js下的包管理器
Webpack: 它的主要用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包
Vue-cli:用户生成vue工程模板

1.安装node.js

从node.js官网下载并安装node.js https://nodejs.org/en/download/

在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口，查看版本是否安装成功

注意: npm 版本需要大于 3.0

##升级npm
cnpm install npm -g

环境配置

2.设置淘宝镜像源

基于node.js利用淘宝npm镜像安装相关依赖，由于国内使用npm会很慢,推荐使用淘宝NPM镜像

因为镜像会因为没人维护被淘汰，使用旧的镜像会出现ERROR，使用新的镜像

全局切换镜像源：npm config set registry https://registry.npm.taobao.org

查看镜像源使用状态：npm get registry

3.安装vue-cli脚手架构工具

npm install -g @vue/cli

由于网络原因也会出现下载时间就，出现错误的情况，如出现错误，重新下，不能急

 验证是否安装成功 vue -V

下载成功！

创建vue项目

1. 使用cmd创建

在需要创建项目的目录下的路径输入cmd

vue create 项目名

上下键切换空格键选择回车确定

选择需要的特性

Babel 编译

TypeScript 支持使用 TypeScript 书写源码

Progressive Web App (PWA) Support PWA 支持。

Router 路由支持 vue-router 。

Vuex 状态管理支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

选择你的vue版本

在弹出的选择中,表示是否是使用history方式创建路由:默认,选择y

选择代码校验规范,默认选择第一项,只进行报错提示:

是否将配置信息放到独立的文件中

是否要保存刚才的设置为模板保存就y 输入模板名

回车

创建成功！

cd 项目
npm run serve  ##启动项目

访问vue项目输入http://localhost:8081

2.使用vscode创建

vscode打开命令窗口:

或使用 Ctrl+`(数字1旁边的键)

后面的步骤同上

如果打开的目录不是vue项目目录，点击其中任意一个文件会报错

解决方法：切换到项目目录

关闭ES的语法检查

在vue.config.js文件中添加如下配置:
lintOnSave:false,//关闭语法检查
重启项目完成！

创建的项目结构

一个项目只有一个APP.vue 如果想看见不同的组件的效果

像webapps里有不同的jsp html

在终端 ctrl c 中断项目运行，复制src，将原src命名为其他，将需要显示的目录命名为src。

一个.vue的文件结构

<template><!--组件的结构--></template>
<script>//组件交互相关的js代码
</script><style>/*组件的样式 */
</style>

vue使用脚手架的单文件组件环境搭建相关推荐

Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
vue开发规范（单文件组件）
这里主要分为Vue风格指南和customer自定义风格,后续应该会继续更新. vue风格指南优先级A(必要的) 组件名为多个单词 export default {name: 'vue-calenda ...
使用vue-cli创建Vue工程化项目及单文件组件的创建和调用
文章目录 1. Vue 单文件组件的优势 2. cli 创建 Vue 工程项目 3. 单文件组件的创建和调用 1. Vue 单文件组件的优势把一个组件全部内容汇合到一个文件中,文件名字是以 .vue ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这 ...
Vue系列之单文件组件
文章目录前言一.什么是单文件组件? 二.单文件组件的结构三.如何引入并使用单文件组件 1. B组件中需导出(export) 2. A组件中需导入并局部注册B(import) 前言 Vue应用的一 ...
Vue之单文件组件和脚手架
简介主要介绍单文件组件的定义和编写方法和脚手架相关知识介绍. 单文件组件的定义是一个文件只有一个组件,使用xxx.vue文件,这个文件是vue团队定义的一种文件类型. xxx.vue文件里面可以使用 ...
三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) ...
vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义使用Vue.extend(options)创建,其中options和new ...

vue使用脚手架的单文件组件环境搭建

组件