利用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,最好是自己一步步敲出来,这样印象会深刻一些!

原文地址:https://www.cnblogs.com/guhonghao/p/11882490.html