Vue ---项目环境安装及基本概念

写在前边的一些零碎的知识点

①可以去百度搜索插件名称
eg: es6文件不支持 百度搜索 VSCode es6插件
② 设置里边有键盘快捷键，需要什么快捷键，可以去里边找
③ 取消注释 ctrl+/
④ 设置里边的用户代码片段 里边会有新建全局代码片段，也有这个软件已经写好的代码
⑤ 创建文件之后，页面中打一个"!"叹号，代码片段就会出来
eg:创建html文件后，页面中打一个叹号，会出现HTML代码
⑥ html页面浏览器运行，鼠标右键，Open in Default Browser
若想用其他浏览器打开，点 Open in Other Browsers去选择其他浏览器

一.项目环境安装

1.首先在电脑上安装下图node

2.在电脑上搜索cmd检查是否安装成功
① 若安装的不是C盘，例如我安装的是D盘，后边输入d:然后按下回车键就可以

②node-vnode环境检测
node环境装好后，会自带装npm ，用npm -v检测

3.淘宝镜像
我们上边下载出来是npm, 可是npm用起来速度很慢，一般都用cnpm，cnpm需要用淘宝镜像进行安装
npm.taobao.org 淘宝镜像，网页网址栏直接搜索
复制如下指令

 npm install -g cnpm --registry=https://registry.npm.taobao.org

装好了之后输入cnpm -v 进行检测

这些步骤完成之后，项目的环境就搭建好了，接下来就是vue操作内容

二.安装Vue环境

1. 在cmd窗口输入 cnpm install vue
   

2.安装完成后再输入vue回车，检测是否安装成功，如果安装失败则继续安装脚手架cil(命令行工具)
cnpm install -g vue-cli

vue-cil具有重载和校验功能，为单页面应用快速搭建复杂的脚手架
安装完成后再次输入vue进行检测，就是没有问题的
查看vue-cil版本，输入vue -V

三.创建第一个Vue项目(老版本)

1.全文件版本下载
① 在终端中输入 vue init webpack vue01
之后会有提示信息或者选择性的填写：名称(确认后按回车键即可),工程描述,作者,一路回车,到ESDLint to lint your code 是否监听你的代码，选择no，回车。
② 这里有一个yarn命令，yarn可以替换npm,yarn相比于npm的优势为速度更快，其他语法类似

2.简单版本下载
① vue init webpack-simple vue02
然后文件中选择文件夹打开，就可以看见文件中的内容了
src是开发目录，index.html是应用首页
② 再安装依赖
cnpm install
会显示本地端口
在网址栏输入端口，可以查看写的页面
成功建立的vue文件

四.安装中遇到的问题

问题1.创建Vue项目出错，提示vue :

无法加载文件C:\Users\xxx\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅
https:/go.microsoft.com/fwlink/?LinkID=135170

解决办法：
1.搜索PowerShell，然后右键，点击以管理员身份运行
2.执行：get-ExecutionPolicy，回复Restricted，表示状态是禁止的
3.执行：set-ExecutionPolicy RemoteSigned
4.选择Y
完成后再重启软件输入指令就可以了

问题2.无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称’ 或 ‘vue不是内部或外部命令

解决办法：
这表示系统没有找到 vue.cmd 的地址，需要将地址加入到环境变量，找到vue.cmd文件所在的文件夹位置，打开高级设置，将路径添加到path中

五.Vue less文件安装

第一步：安装less依赖

 cnpm install less --save-dev
 cnpm install less-loader --save-dev

第二步：修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
安装完成less之后，在配置文件rules中配置解析代码，直接添加下边这段代码

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

}

当前组件加载外部的css,使用@import 进行加载
如果写less 在style上添加属性 lang=“less”
若less上添加scope 限制作用域

<style lang="less">
	@import url("./assets/app.less");
</style>

六.基本概念

一些快捷操作

名称	作用
cls	清屏
ctrl+c	关闭当前页面，防止造成系统项目文件的丢失
ctrl+shift+p	打开命令设置行
cnmp install	安装依赖
cnpm run dev	运行文件
alt+shift+f	将代码格式化

文件作用

名称	作用
main.js	文件主入口文件
App.vue	是主组件
assets	文件放图片的资源文件
static	静态资源目录，可以存放全局css样式或者相对路径(打包后也不会更改)；也可以使用public
bulid	配置文件
nodemodules	模块化
public	公开访问目录

src 开发目录

下边是main.js里边的内容及其简单介绍

import Vue from 'vue'  //引入vue
import App from './App.vue'   //引入App.vue组件

//vue的实例化对象
//el 关联的对象  首页中有个div id为app
//render 渲染
new Vue({
  el: '#app',
  render: h => h(App)
})

下边是App.vue 里边的内容及其简单介绍

<template>
<!-- 
  z组件里边只能有一个父元素
 -->
  <div id="app">
   
  </div>
</template>

<!-- 
  当前组件的js代码区域
  export default 暴露出当前模块
  name 指当前组件名称
  data 为整个组件的数据模块
 -->
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'  //定义的数据
    }
  }
}
</script>

<!--当前组件的css区域(样式)
scope 将下边代码限制成局部操作

-->
<style>

</style>