zoukankan      html  css  js  c++  java
  • 利用vue-cli搭建vue项目

    1.0下载node.js,并安装,能成功查询到node和npm版本号,如下图,说明安装成功:

    2.0因为npm是国外的,下载资源比较慢,可以使用淘宝镜像(cnpm)

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

    能成功查询到版本号,说明安装成功,如下图:

    3.0然后可以全局安装vue-cli

    cnpm install -g vue-cli

    4.0使用vue-cli来创建一个基于 webpack 模板的新项目

    新建一个存放项目的文件,然后打开命令行

    vue init webpack

    回车键之后,会要求输入文件名(不能中文),随后一系列配置,选择yes或者no即可

    完成后会生成以下文件:

    进入到当前文件夹,打开命令行,下载依赖包,输入:cnpm install

    5.0 依赖包下载完毕之后,在命令行输入:npm run dev 可以运行项目,如下图

    也可以在编译软件上运行项目,如在vscode上:

    以上一个基本的vue结构搭建完毕

    下面是一些功能搭建:

    *使用axios,配置跨越,步骤如下:

    1.0下载axios : cnpm install axios –save

    2.0 在项目中新建一个js文件,引入axios,然后进行配置:

    3.0 在项目中的config/index.js文件中配置跨域相关信息,如下:

    4.0 将需要使用到的后台服务进行配置

    然后在项目中进行服务调用,如下:

    *使用css预处理器less

    1.0 下载less:cnpm install less less-loader –-save-dev

    2.0 安装成功之后,在vue项目文件,build/webpack.base.conf.js文件的module-rules下面添加{test:/.less$/,loader:”style-loader!css-loader!less-loader”},如下图:

    3.0 配置好之后,在页面上写css时可以使用less,如下:

    ps:之所以用截图没直接贴代码,是想告诉你如果打算用vue,最好是自己一步步敲出来,这样印象会深刻一些!

  • 相关阅读:
    ssm框架实现多条件查询分页(模拟百度算法)
    spring与mybatis的整合
    spring入门
    mybatis foreach标签用法
    图书借阅系统简易异步分页源码
    Jquery常用选择器
    mvc
    Java连接数据库 jdbc
    java学习线路
    Mybatis传递多个参数的几种方式
  • 原文地址:https://www.cnblogs.com/guhonghao/p/11882490.html
Copyright © 2011-2022 走看看