vue.js ——入门

最新推荐文章于 2022-07-12 10:21:36 发布

置顶

Ace.三阶斗尊

最新推荐文章于 2022-07-12 10:21:36 发布

阅读量611

点赞数 1

分类专栏：前端vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42231156/article/details/80429430

版权

本文档详细介绍了Vue.js的入门方法，包括官网、下载配置、npm安装、webpack打包、项目结构、基本语法、文件夹目录结构、组件传值、路由配置、与服务器通信、CSS和JS动画效果等内容，是学习Vue.js的全面教程。

摘要由CSDN通过智能技术生成

添加小程序，兑换各种视频教程/数据资源。

1. 官网：www.vuejs.org 。

2. 下载配置方法：

方法1：在官网www.vuejs.org下载vue.js文件，然后在html里面引入

<script src="vue.js"></script>

方法2：直接远程在线引入vue.js文件。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

方法3：npm 下载；

具体步骤：

程序（window键+R）cmd ---> 命令行中输入node i -g vue-cli回车；或在项目文件位置命令行中npm install vue-cli -g；命令行输入vue 查看是否按照成功，命令行输入vue -V 查看vue版本 V为大写字母。

方法4：webpack打包；在确认电脑安装Node和vue之后，在想创建项目的位置的命令行中(如c://xampp/htdocs)执行以下步骤：

（1）vue init webpack 项目文件名称（如taobao）：然后不修改的话，全回车即可；注意文件名不要有大写字母中文；

（2）在项目文件创建完成后进入项目文件下的命令行(cd taobao)；

（3）npm i；

（4）npm install vue-resource ：在main.js中配置import VueResource from 'vue-resource'; Vue.use(VueResource) 。用于$http.get(utl).then(data=>{发送请求数据库获取的数据data});

（5）npm run dev：启动项目；在项目文件下config->index.js可以设置端口号；

（6）在浏览器中输入localhost:端口号(默认808)，打开vue默认网页；

（7）在项目文件下scr->App.vue,scr->components->Hello.vue中可以删除默认样式和默认模板，然后就可以开始编译自己的

项目了；

（8）安装less ：

第一步：

安装less依赖：npm install less less-loader --save

第二步：

修改webpack.base.config.js文件中module{}里面，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

{
  test: /\.less$/, loader: "style-loader!css-loader!less-loader", 
}

第三步：

在.vue文件里设置的<style scoped lang="less"></style>

（9）在main.js文件或.vue文件中引入自己的CSS/JS文件：

<script>
import HeaderComponent from "./header.vue"
import HeaderComponent from "./header.vue"

import "../assets/css/reset.css"
  export default {
    components:{
      HeaderComponent
    }   
  } 
</srcipt>

  export default {
    components:{
      HeaderComponent
    }   
  } 
</srcipt>