Vue项目环境搭建的示例-创新互联

这篇文章主要介绍Vue项目环境搭建的示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司是一家专注于成都网站设计、成都网站制作、外贸网站建设与策划设计,合浦网站建设哪家好?创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:合浦等地区。合浦做网站价格咨询:18980820575

安装NodeJs

首先解释一下什么是nodejs，为什么要安装node？node的优点？

node.js是一个运行在chromeJavascript运行环境下（俗称GoogleV8引擎）的开发平台，用来方便快捷的创建服务器端网络应用程序，也可以把它理解为一个轻量级的JSP或PHP环境，如果用来开发Web应用的话，有时要便捷很多。

node.js的大优点是处理并行访问，如果一个web应用程序同时会有很多访问连接，就能体现使用node.js的优势。
另一个好处是，使用javascript作为服务器端脚本语言，可以消除一些与浏览器端js脚本的冲突。甚至发挥javascript动态编程的特性，在服务器与浏览器之间建立直接的动态程序。
总的来说，node.js可以像PHP一样开发动态网站和WEB应用。

安装步骤

安装环境：Windows7  x64

1.第一步检测一下电脑是否安装node.js

(1).开始-搜索cmd-回车，在命令行输入node -v，回车，如果出现“'node' 不是内部或外部命令，也不是可运行的程序...”时说明没有安装node.js;

(2).https://nodejs.org/en/  下载并安装node.js（选择LTS格式），下载好后双击开始安装，点击Next：

(3).勾选“I accept the terms in the License Agreement”同意许可协议，并单击Next下一步，出现如下界面：

(4).Node.js默认安装路径为“C:\Program Files\nodejs\”，可以修改其他盘（我选择的是安装在D盘），单击Next，出现安装模式及模块选择界面：

(5).接着点击Next:

(6).确认无误后，点击Install，开始安装：

(7).耐心等待一会，安装完成，点击Finish即可：

(8).打开cmd（Windows+R），检测node是否安装成功：

 首先测试npm是否安装成功，由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入“npm -v”来测试是否安装成功。

（这种安装较慢，也可以利用淘宝镜像进行安装， 在cmd里直接输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回车，等待安装...(windows使用管理员身份进行安装)）

2.安装全局webpack

在命令行里输入：npm install webpack -g （C盘）进行全局安装：

3.安装vue-cli脚手架工具

在命令行里输入：npm install -g vue-cli  （C盘）进行全局安装:

输入：vue，回车，如果出现vue信息说明安装成功

4.创建项目

关闭命令行，任意选择一个盘（这里，我选择D盘，新建一个名为mypro的文件夹），把mypro文件夹放进HBuilder，进入D盘mypro文件夹，右键选择在此处打开命令窗口，输入 vue init webpack mypro 回车：

5.进入项目文件夹：cd mypro   (cd +  vue init webpack mypro  中的项目名字mypro)，回车进入项目文件夹：

输入： npm install     初始化，安装依赖包node_modules

6.安装完成后输入：npm run dev  运行测试：

7.最后浏览器弹出结果为：

补充：

vue cli3安装：

一、安装

npm install -g @vue/cli
或
yarn global add @vue/cli

检查安装 vue -V

二、创建新项目

npm create admin

 

admin是你需要创建的项目名称，这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个

三、enter之后会弹出以下选择

当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步，这里可以根据自己的需求来选择

四、安装预处理语言

这一步询问你安装哪一种 CSS 预处理语言，根据自己的需求自行选择即可

五、选择自动化代码格式检测

上面这个是询问你代码格式化检测，配合vscode编辑器的Prettier - Code formatter插件，可以选择随后一个

六、保存设置 

 上图第一个选项是问你是否保存刚才的配置，选择确定后你下次再创建新项目就有你以前选择的配置了，不用重新再配置一遍了

七、选择配置文件位置

上图意思问你像，babel,postcss,eslint这些配置文件放哪？
第一个是：放独立文件放置
第二个是：放package.json里
这里推荐放单独配置文件，选第一个 

八、最后一步保存设置

 上边倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗？
最后一个是描述项目，你随意选择，点击确定就开始下载模板了

九、下载模板

cd admin进项目，启动服务npm run serve,这里是没有vue.config.js文件的

十、新建一个vue.config.js文件，进行项目配置

以上是“Vue项目环境搭建的示例”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻标题：Vue项目环境搭建的示例-创新互联
标题来源：http://6mz.cn/article/dhgpei.html