1.在node官网下载并安装node(建议3.0以后的版本),选定指定目录后,安装node一路next即可。
node网址:https://www.cnblogs.com/hackyo/p/8110951.html
安装完检查:在cmd 下输入node -v,如果出现版本号就证明安装成功了;
2.安装淘宝镜像(安装依赖):npm install -g cnpm --registry= https://registry.npm.taobao.org 检查: npm -v
提示:至于是选择npm还是选择cnpm安装看个人需要。本质上没有区别。安装的依赖都相同。只是两种安装途径。注意,如论这里选择哪种,后面的环节都要保持相同。
3.安装webpack:npm install webpack -g 检查: webpack -v
4.安装vue 脚手架:npm install vue-cli -g 检查:vue -V
通过以上四步,我们需要准备的环境和工具都准备好了
5.接下来就开始使用vue-cli来构建项目:
5.1 通过DOS命令进入存放项目的目录
5.2在该目录下安装项目依赖:安装vue脚手架输入:vue init webpack exprice ,注意这里的“exprice” 是项目的名称可以说是随便的起名,但是需要主要的是“不能用中文”。
$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称:必填且英文名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述:可忽略
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者:可忽略
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)
? Install vue-router? Yes --------------------- 是否安装Vue路由,选择yes(页面路由跳转会用到)
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No ---------------------是否启用eslint检测规则,这里个人建议选no(否则开发时,报错会非常多,严格模式开发另说)
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
创建完的项目路径:创建完之后,你会发现你的项目文件夹里多个 node_modules(项目依赖)这个文件夹
6.文件说明:
7.启动项目,输入:npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”。
注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。
8.热加载,执行 npm run dev让其自动启页面:
1.在项目目录中的config文件夹中找到index.js并用编辑器打开。
2.找到里面的 dev 方法, autoOpenBrowser: true,由默认的false改成ture。8080端口号也是在这里修改。
3.在项目中按住shift+右键,选择 在此处打开命令窗口,会快速弹出运行窗口
4.再次执行 npm run dev 命令。你会看到惊喜哦!!!
9.请求数据:数据请求有三种方式vue-resource(vue3.0不在维护了),fetch(原生js范畴)和axios(推荐项目使用)
我这里用的是vue-resource。如果您需要向服务端请求数据,您首先要安装vue-resource。
vue-resource简介:是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。
9.1在项目文件中进入通过shift+鼠标右键键入终端:
9.2在项目终端中项目目录里(D:\vue-misic>),然后使用以下命令进行安装:npm install vue-resourse --save。
--save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后, 可以查看package.json文件,你会发现多了 "vue-resource": "^1.5.1",的配置。
通过以上步骤,我们已经安装好了vue-resource,
9.3在vue-cli中使用vue-resourcse,需要在main.js文件中导入并注册vue-resource:
import VueResource from 'vue-resource'
Vue.use(VueResource)
9.4项目调用之get请求:
9.5项目调用之POST请求:
10.运行vue项目文件:在.vue内按住ctrl+`,调出命令行,然后执行 npm run dev命令。