vue.js环境解析运行的程序语言问题：怎么用？

1150302189

本文主要讲述vue开发环境与项目搭建 如果想看创建vue项目，点击跳转 〇、背景 项目需要，需要搭建一个VUE项目，从零开始。 鉴于网上资料参差不齐，再加上看到的博文行文思路混乱、排版糟糕，看得头疼，为此有必要对搭建过程做一个详细的记录。 本文将从VUE项目切入，全面介绍整个VUE项目需要的所有软件以及对其进行相关的处置，不求详细vue搭建论坛， 但是至少要解决一个问题： 1、这是什么？ 同时尽可能扩展两个问题： 1、能做什么？ 2、怎么用？ Vue.js是什么 Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 vue的开发环境需要安装的软件如下 ①Node.js ②cnpm ②脚手架vue-cli ④-cli

一、安装node.js 1、node.js是什么 Node.js是一个基于的V8引擎，事件驱动I/O服务端环境（） V8引擎执行的速度非常快，性能非常好。 Node.js环境解析运行的程序语言是(类似于jdk环境与java语言) Node.js是前端框架React/Vuejs开发环境运行的基础。 2、node.js可以做什么 ①可以解析运行程序 ②可以操作系统资源(io,线程)，可以给所运行的程序提供操作系统资源的能力 ③既可以作为web运行js程序(通常安装在服务端)，也可以作为打包工具或者构建工具(通常安装在开发环境上) ④实现高性能服务器(因为V8引擎) 3、node.js怎么用 PS： 以下命令执行都是在终端（Linux环境）或者DOS窗口（环境） npm是Node的缩写，意思是Node的包管理系统 主要用法分两类，开发环境与运行环境：主要需要处置执行相关命令进行操作 ①在安装了node.js的环境上可以安装js的开发工具开发js项目，如常用的，Code ②在安装了node.js的环境上能直接运行node.js服务程序，如有程序.js直接运行以下命令即可

    node rename.js

一个简单的案例：nginx上传文件 ③打包构建js项目 如安装项目依赖软件包，在项目根目录执行

    npm install
# 也可以直接指名软件包，如想要安装moment
npm install moment

④构建和运行js服务

    # 构建 
npm run build
# 运行
npm run dev

4、node安装 ①、【点击跳转】 ②、cnpm安装：为了提高我们的效率，可以安装淘宝的镜像，安装之后可以使用cnpm代替npm npm的服务器是外国的，所以有时候我们安装“模块”会很慢很慢甚至导致安装失败。淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间和成功率。

    # 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 检查是否安装成功，如果win10 提示 禁止运行，先执行  set-ExecutionPolicy RemoteSigned
cnpm -v

二、安装vue-cli 1、vue-cli是什么 vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+的项目模板vue搭建论坛，是为现代前端工作流提供了- 2、vue-cli安装 安装命令

    npm install --global vue-cli
# 或者用 cnpm 安装 cnpm install vue-cli -g

三、安装-cli 1、简介 是一个应用程序的静态模块打包器 它能将多个js文件打包成一个文件（其实不止能打包js文件，也能打包其他类型的文件，比如css文件天外神坛源码网，json文件等）。 主要用法是结合vue-cli用于项目搭建打包 2、-cli安装 安装命令

    npm install webpack-cli -g

四、搭建VUE项目 1、执行命令创建项目 ①、创建项目目录，如C:\Users\\ ②、进入项目目录执行命令vueinit项目名

之后看项目目录 2、安装项目依赖 进入项目根目录，这里是C:\Users\\\vue-test-1 执行命令

    cnpm i

3、启动项目 执行命令

    npm run dev

然后到浏览器打开网址:8080

五、VUE项目目录说明

完成！ 拓展 vue,vue-cli,的区别以及关联 vue专题下一篇：vue专题之创建vue项目【二】

w96680

546841323