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

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

组件

把一个页面拆分成一堆组件，每个组件都有自己的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>