Vue项目环境搭建详细总结

 更新时间:2019年09月26日 09:43:45   作者:Gemini仔仔  
这篇文章主要为大家介绍了Vue项目环境搭建总结篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

关于Vue安装的详细步骤总结

安装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.js v-for不支持IE9的解决方法

    详解Vue.js v-for不支持IE9的解决方法

    这篇文章主要介绍了详解Vue.js v-for不支持IE9的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue填坑之webpack run build 静态资源找不到的解决方法

    vue填坑之webpack run build 静态资源找不到的解决方法

    今天小编就为大家分享一篇vue填坑之webpack run build 静态资源找不到的解决方法。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,下面通过本文给大家介绍在vue项目中安装使用Mint-UI的方法,需要的朋友参考下吧
    2017-12-12
  • Vue实现答题功能

    Vue实现答题功能

    最近接手做一个前端小项目,基于vue实现答题功能,具体功能有判断用户是否答对,答对的话跳到下一题,答错的话弹窗告诉用户有错题,请重新答题,功能非常人性化,对实现代码感兴趣的朋友一起看看吧
    2021-06-06
  • 深入浅析Vue 中 ref 的使用

    深入浅析Vue 中 ref 的使用

    在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作。这篇文章主要介绍了Vue 中 ref 的使用 ,需要的朋友可以参考下
    2019-04-04
  • Vue2 轮播图slide组件实例代码

    Vue2 轮播图slide组件实例代码

    这篇文章主要介绍了Vue2 轮播图slide组件实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue实现水波涟漪效果的点击反馈指令

    vue实现水波涟漪效果的点击反馈指令

    鼠标移入时的小手、鼠标点击时按钮下压弹起的动画、触屏应用点击时的屏幕震动,这些效果也被统称为点击反馈,虽然看似是应用中的细枝末节,但是只要稍微投入一点点心思,带来的用户体验提升是十分明显的,这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。
    2021-05-05
  • 解决vue 更改计算属性后select选中值不更改的问题

    解决vue 更改计算属性后select选中值不更改的问题

    下面小编就为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue-cli 自定义指令directive 添加验证滑块示例

    vue-cli 自定义指令directive 添加验证滑块示例

    本篇文章主要介绍了vue-cli 自定义指令directive 添加验证滑块示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 在Vue组件中获取全局的点击事件方法

    在Vue组件中获取全局的点击事件方法

    今天小编就为大家分享一篇在Vue组件中获取全局的点击事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论