利用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，最好是本身一步步敲出来，这样印象会深入一些！