第一步:安装node.js 下载链接[1]

node简介 Node.js是一个Javascript运行环境。实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器,他会改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码。

那直白的说,Node.js就是服务器程序,是用来做后端的技术,不能直接用于前端开发。但是干前端的学会了会更加的牛逼,对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发,能够高效的打通前后端,所以vue也是采用他作为配置环境,便于大型项目的开发。

如何查看是否安装成功 打开终端输入 node -v

Vue 入门环境搭建_java

设置淘宝源:通过配置镜像,便于下载npm其他东西,非必须配置,打开终端输入一下命令

pm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site=[https://npm](https://npm).[taobao.org/mirrors/node-sass/](http://taobao.org/mirrors/node-sass/)

第二步:安装vue.js

打开cmd命令框,输入 npm install vueVue 入门环境搭建_java_02

第三步:安装vue-cli工具

Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用,打开cmd命令框,输入

sudo 是管理员权限,不需要可以不加

sudo  npm install -g @vue/cli

第四步 :安装webpack

webpack 是处理模块管理、打包, 打开cmd命令框,输入

npm install webpack -g

第五步:创建vue的demo项目

1.cd到要创建的文件夹:cd /Users/apple/Desktop/VueDemo2.在VueDemo文件夹内,创建一个叫helloword的工程:vue create helloword3.之后会弹出一些选择项,如果不知道选择哪个,按照我截图的选择即可4.之后VueDemo文件夹内就会出现一个helloword 的demo工程Vue 入门环境搭建_java_03Vue 入门环境搭建_java_04

第六步:运行demo项目

1.cd 到helloword工程目录下2.npm install 第一次运行工程需要执行,目的是下载项目中用到的node_modules库3.npm run serve 启动服务4.打开浏览器 http://localhost:8081/ 就可以看到我们本地搭建的项目Vue 入门环境搭建_java_05

Vue 入门环境搭建_java_06

npm指令记录:

 //安装vant 插件
 npm install vant --save
 
 //启动服务器
 npm run serve
 
 //打包成产品的时候 需要用到的指令
 npm run build

参考文献

1. 推荐安装 Visual Studio Code 是Vue编辑器,便于开发使用 下载地址[2]

2. 官方教程 Vue CLI[3]

References

[1] 下载链接: https://link.jianshu.com/?t=https://nodejs.org/en/
[2] 下载地址: https://code.visualstudio.com/
[3] Vue CLI: https://cli.vuejs.org/zh/


相关推荐


微信小程序实战篇-购物车


微信小程序实战篇-商品详情页


微信小程序实战篇-电商



Vue 入门环境搭建_java_07