天天看点

搭建vue

搭建项目前需要做的准备

在做 Vue.js 开发时,大家需要了解并安装以下开发工具。

1.Node.js

Node.js是一个基于Chrome JavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动,非阻塞 I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

它是前端框架,后台语言。对于Node,大家不用深入研究只需会安装配置即可。

2.npm

npm 是随同 Node.js 一起安装的包管理工具,能解决 Node.js 代码部署上的很多问题,常见的使用场景有以下几种:

从 npm 服务器下载别人编写的第三方包到本地使用。

从 npm 服务器下载并安装别人编写的命令行程序到本地使用。

将自己编写的包或命令行程序上传到 npm 服务器供别人使用。

3.webpack

本质上,webpack 是一个现代 JavaScript 应用程序的模块打包器(Module Bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(Dependency Graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 Bundle。

它就是一款模块加载器兼打包工具,在开发过程中,需要依靠它才能将内容呈现在你面前。

4.vue-cli

vue-cli 脚手架构建工具,用来快速构建 Vue.js 项目。

以上内容推荐安装最新版,以避免出现一系列问题。

如何确认自己的电脑是否安装了对应的工具?

在命令提示符中输入:工具名称 + v,如果已经安装它,就会弹出对应的工具版本,如:

搭建vue

搭建开发环境

如果你已经做好了上述准备,那就跟着我开始完善我们的开发环境吧,主要包括以下四步。

1.安装 Node.js;

2.基于 Node.js 安装npm(淘宝镜像);

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

3.安装 webpack;

cnpm install webpack -g
           

4.安装 vue-cli 脚手架;

npm install vue-cli -g
           

打开存放新建项目的文件夹。

按住shift + 鼠标右键 点击:在此处打开powershell 窗口,,可能有些系统是不一样的,,可以用快捷键 win+R,输入 CMD,敲回车,弹出命令提示符。

打开之后路径默认为“C:\Users\Administrator>”。

搭建vue

如果你的文件不在C盘,请输入盘符+":",如“e:”。

搭建vue

它会进入E盘下,接着输入CD+空格+文件路径,如“/cloudcard/ClearExtensionApp”。

搭建vue

然后输入敲回车 vue init webpack projectName

vue init webpack 后面的是将要创建的文件名,项目名称一定要是英文。

搭建vue
搭建vue

project name 直接回车键

project description 直接回车键

Author 直接回车键

Vue build 直接回车键

Install vue-router ? 是否安装路由,,,一般都是yes,,直接回车键

Use ESLint to lint your code? (Y/n):否启用 ESLint 检测规则,看个人对自己代码的把握,我都是选的是

Setup unit tests with Karma + Mocha ? 是否测试??一般选NO

Setup e2e tests with Nightwatch ? e2e测试,一般选NO

接下来直接回车键

最后的三个命令告诉你如何启动:

cd demo

npm install

npm run dev

vue 一些基础配置安装

npm install axios

npm install axios

axios 等于jq ajax

用到post请求时,需要安装qs

import qs from ‘qs’

var a = qs.stringify({})

axios.post(url, a).then(function (res) => {})

解析less和scss

npm install less less-loader sass-loader node-sass --save-dev