vue.js环境解析运行的程序语言问题：怎么用？
本文主要讲述vue开发环境与项目搭建如果想看创建vue项目，点击跳转
〇、背景
项目需要，需要搭建一个VUE项目，从零开始。
鉴于网上资料参差不齐，再加上看到的博文行文思路混乱、排版糟糕，看得头疼，为此有必要对搭建过程做一个详细的记录。
本文将从VUE项目切入，全面介绍整个VUE项目需要的所有软件以及对其进行相关的处置，不求详细vue搭建论坛，
但是至少要解决一个问题：
1、这是什么？
同时尽可能扩展两个问题：
1、能做什么？
2、怎么用？
Vue.js是什么
Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
vue的开发环境需要安装的软件如下
①Node.js
②cnpm
②脚手架vue-cli
④-cli
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_0.png
一、安装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直接运行以下命令即可
<p><pre> <code class="prism language-shell">node rename.js
</code></pre></p>
一个简单的案例：nginx上传文件
③打包构建js项目
如安装项目依赖软件包，在项目根目录执行
<p><pre> <code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span>
<span class="token comment"># 也可以直接指名软件包，如想要安装moment</span>
<span class="token function">npm</span> <span class="token function">install</span> moment
</code></pre></p>
④构建和运行js服务
<p><pre> <code class="prism language-shell"><span class="token comment"># 构建 </span>
<span class="token function">npm</span> run build
<span class="token comment"># 运行</span>
<span class="token function">npm</span> run dev
</code></pre></p>
4、node安装
①、【点击跳转】
②、cnpm安装：为了提高我们的效率，可以安装淘宝的镜像，安装之后可以使用cnpm代替npm
npm的服务器是外国的，所以有时候我们安装“模块”会很慢很慢甚至导致安装失败。淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间和成功率。
<p><pre> <code class="prism language-shell"><span class="token comment"># 安装</span>
<span class="token function">npm</span> <span class="token function">install</span> -g cnpm --registry<span class="token operator">=</span>https://registry.npm.taobao.org
<span class="token comment"># 检查是否安装成功，如果win10 提示 禁止运行，先执行set-ExecutionPolicy RemoteSigned</span>
cnpm -v
</code></pre></p>
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_1.png
二、安装vue-cli
1、vue-cli是什么
vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+的项目模板vue搭建论坛，是为现代前端工作流提供了-
2、vue-cli安装
安装命令
<p><pre> <code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span> --global vue-cli
<span class="token comment"># 或者用 cnpm 安装 cnpm install vue-cli -g</span>
</code></pre></p>
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_2.png
三、安装-cli
1、简介
是一个应用程序的静态模块打包器
它能将多个js文件打包成一个文件（其实不止能打包js文件，也能打包其他类型的文件，比如css文件天外神坛源码网，json文件等）。
主要用法是结合vue-cli用于项目搭建打包
2、-cli安装
安装命令
<p><pre> <code class="prism language-shell"><span class="token function">npm</span> <span class="token function">install</span> webpack-cli -g
</code></pre></p>
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_3.png
四、搭建VUE项目
1、执行命令创建项目
①、创建项目目录，如C:\Users\\
②、进入项目目录执行命令vueinit项目名
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_4.png
之后看项目目录
2、安装项目依赖
进入项目根目录，这里是C:\Users\\\vue-test-1
执行命令
<p><pre> <code class="prism language-shell">cnpm i
</code></pre></p>
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_5.png
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_6.png
3、启动项目
执行命令
<p><pre> <code class="prism language-powershell">npm run dev
</code></pre></p>
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_7.png
然后到浏览器打开网址:8080
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_8.png
五、VUE项目目录说明
http://tt.ccoox.cn/data/attachment/forum/20220305/1646446740138_9.png
完成！
拓展
vue,vue-cli,的区别以及关联
vue专题下一篇：vue专题之创建vue项目【二】 546841323
页:
[1]