Vue 入门环境搭建

公众号：代码集中营
每周分享技术文章、优质软件资源

第一步：安装node.js 下载链接

node简介
Node.js是一个Javascript运行环境。实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器，他会改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个物理机的连接代码。那直白的说，Node.js就是服务器程序，是用来做后端的技术，不能直接用于前端开发。但是干前端的学会了会更加的牛逼，对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发，能够高效的打通前后端，所以vue也是采用他作为配置环境，便于大型项目的开发。

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

image.png

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

npm 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 vue

image.png

第三步：安装vue-cli工具

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

sudo  npm install -g @vue/cli

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

第四步 ：安装webpack

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

npm install webpack -g

第五步：创建vue的demo项目

1. cd到要创建的文件夹：cd /Users/apple/Desktop/VueDemo
2. 在VueDemo文件夹内，创建一个叫helloword的工程：vue create helloword
3. 之后会弹出一些选择项，如果不知道选择哪个，按照我截图的选择即可

4. 之后VueDemo文件夹内就会出现一个helloword 的demo工程

   
   
   image.png
   
   
   image.png

第六步：运行demo项目

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

image.png

npm指令记录：

//安装vant 插件
npm install vant --save

//启动服务器
npm run serve

//打包成产品的时候 需要用到的指令
npm run build

参考文献

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

2. 官方教程 Vue CLI