vue之搭建cli环境

1.v-model绑定input中的value值

2.安装vue-cli

  (1).安装node.js

   (2)安装 vue-cli

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

3.首先需要在命令行中进入到项目目录,然后输入:

vue init webpack Vue-Project

然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

然后启动项目

npm run dev

ctrl+c终止该程序

4.使用v-for key 进行循环

5.设置路由  需要将组建导入

 6.methods调用方法实现按钮点击事件

7.v-bind绑定html属性

8.使用sertimental实现跑马灯效果

9.v-for 中key的作用

可以简单的这样理解:加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果

10.安装yarn

  用来取代npm,防止外网不稳定导致npm使用不方面

11.Vue-cli工程项目中各个文件夹及文件的作用分析

      1).build文件夹

            存放webpack的相关配置以及脚本文件,在实际开发过程中只会偶尔用到webpack.base.conf.js,配置less、babel等编译器

      2)config文件夹

            config文件夹:常用到此文件夹下 config.js(index.js) 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

      3)node_modules

            存放npm install命令下载的开发环境和生产环境的各种依赖

      4)src文件

            工程项目的源码以及资源,包括页面图片、路由组件、路由配置、vuex、入口文件等

       5)test 

             单元测试,一般不用

       6)package.json

             package.json是npm的配置文件,里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。

       7)App.vue

             它是根实例下的一个子组件。
             因为main.js是入口文件不适合写逻辑,所以下面分支出一个子组件(App.vue),我们使用的时候就把这个子组件(App.vue)当做我们的顶级组件!

        8)main.js

            我们打开vue-cli里面的main.js,这个文件被称为入口文件,这个里面有一个vue的实例,el:"#app"

             

发布了154 篇原创文章 · 获赞 9 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43727372/article/details/102584795