搭建项目前需要做的准备
在做 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,如果已经安装它,就会弹出对应的工具版本,如:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLwMTO2MTO0ATM3IjMwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
搭建开发环境
如果你已经做好了上述准备,那就跟着我开始完善我们的开发环境吧,主要包括以下四步。
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>”。
如果你的文件不在C盘,请输入盘符+":",如“e:”。
它会进入E盘下,接着输入CD+空格+文件路径,如“/cloudcard/ClearExtensionApp”。
然后输入敲回车 vue init webpack projectName
vue init webpack 后面的是将要创建的文件名,项目名称一定要是英文。
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