vue cli 学习笔记

*1、安装Node.js*

*1.1官网下载安装*

地址https://nodejs.org/zh-cn/

*1.2安装完检查*

Ctrl+r写入cmd出现命令提示行

然后打入：

node -v查看node版本

npm -v查看npm版本

安装过程如果改动运行目录，比喻为：D:\nodejs

*1.3最重要的工作！设置全局目录！*

命令提示行打入：

npm confifig set prefifix "D:\nodejs\node_global"

再打入：

npm confifig set cache "D:\nodejs\node_cache"

*1.4安装cnpm*

*命令提示行打入：*

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

然后查看版本：

cnpm -v

注意：若查看版本时（node -v、npm -v、cnpm -v），出现“XXX不是外部指令或者内部指令XXX”则需要添加环境变量：

我的电脑右键-系统-高级设置-环境变量，

然后：写入这一行，点确定，确定退出去。

*（注意前提是你的D:\nodejs\node_global目录下有cnpm才行。如果你装的位置和我不一样，则以你

装cnpm的位置为准）*

然后从新开cmd，然后再一次cnpm -v

*2 安装vue-cli*

注意：

1、这里我们*不用安装vue*，直接安装脚手架vue-cli即可！

2、注意看官网，安装vue-cli的最新指令

官网地址：https://cli.vuejs.org/zh/guide/installation.html

命令提示行打入：

cnpm install -g @vue/cli

*3 新建一个脚手架项目*

3.1新建一个纯英文目录，然后调出命令提示行，然后输入：

vue create hello-world

3.2到新的脚手架项目目录中运行项目

先打入：

cd hello-world

然后：

cnpm run serve
3.3将新项目打包为html文件，在dist目录
cnpm run build

打包成功后，hello-world下面生成一个dist目录

微信小程序

mpvue

mpvue 是美团开发的一个使用 Vue.js 开发小程序的前端框架，目前支持 微信小程序、百度智能小程序，头条小程序 和 支付宝小程序。框架基于 Vue.js，修改了的运行时框架 runtime 和代码编译器 compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入了 Vue.js 开发体验。

备注：完备的 Vue 开发体验，并且支持多平台的小程序开发，推荐使用

WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含 button、cell、dialog、toast、article、icon 等各式元素。

Vue的列表展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <ul>
            <!-- 相当于创建了movies容量个li，并逐个赋值 -->
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                movies: ['星际穿越', '大话西游', '少年派的奇幻漂流', '到梦空间']
            }
        })
    </script>

</body>

</html>

组件间传数据