美文网首页vue
从零开始为vue搭建基础环境

从零开始为vue搭建基础环境

作者: 璇子是兔子 | 来源:发表于2019-05-24 10:25 被阅读0次

在新接触了mac本之后,发现windows确实有一定操作上的差距,这篇文章主要是介绍从零开始为vue搭建一个基础环境。

windows

我的设备

电脑系统:windows10 64位

我要安装的运行环境node

我要使用的版本控制git

我的学习框架vue

node

1、空白的电脑 在D盘中创建文件夹allTool,用来放置所有下载安装的工具及文件

2、通过网址http://nodejs.cn/download/ 下载node的安装文件,下载完成后点击安装,并把安装路径放在allTool文件夹。安装完成后再cmd中测试

TIM截图20180315165817.png

显示版本号即证明安装正确完成

git

1、在网中下载官方安装包


TIM截图20180315171059.png

2、按照提示步骤安装在allTool文件夹中,安装完成后任何地方右击即可出现git的选项

3、右击打开git bash,输入下面两条命令,即可绑定自己的账号

$ git config --global user.name "Your Name" $ git config --global user.email "email@example.com"

4、顺便创建一个版本库吧 具体的创建方式推荐https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256916071d599b3aed534aaab22a0db6c4e07fd0000

我的练习项目地址 https://github.com/caohuixuan/project1

vue

1、使用npm按照Vue官网教程中的步骤安装vue

npm install vue

出现问题

完成命令后报错出现

bash: npm: command not found

解决方式

关机重启后可执行npm install vue 并完成安装

TIM截图20180316111405.png

2、安装命令行工具cli

执行命令 npm install --global vue-cli

3、通过命令行创建一个机遇webpack的行项目

vue init webpack my-project

出现问题

完成命令后报错出现

bash: npm: command not found


TIM截图20180316113416.png

解决方法

配置环境变量

在执行npm install --global vue-cli命令时,会出现将其安装在哪里,我们要讲安装地址配置到环境变量中,例如我这里的E:\gitGitusrlocalnode_modules,打开我的电脑属性---选择高级系统设置---点击环境变量---选择系统变量中的Path点击编辑,进入后新建并将上面的地址放入,点击确定,就可以完成配置

关闭原来的bash,重新点开,执行vue init webpack my-project命令,就可以创建项目了

mac

基础环境:
安装终端iTerm
安装Homebrew
安装git
安装node 可以使用npm
安装vue cli 脚手架

npm install -g @vue/cli

创建项目

vue create 项目名

启动项目

npm run serve

总结

接触两个系统,能够明显感受到mac更加好上手操作一下,并没有遇到什么未知的错误,之后会选择mac进行开发

相关文章

  • 从零开始为vue搭建基础环境

    在新接触了mac本之后,发现windows确实有一定操作上的差距,这篇文章主要是介绍从零开始为vue搭建一个基础环...

  • vue的todolist

    长话短说,第一步搭建基础页面框架 本次环境在vue-cli中,环境自行在vue官方文档中搭建,所需要的vue基础也...

  • vue3+ts+electron踩坑记录

    本文包括vue3的基础环境搭建和electron配置,全TS。全部技术栈为:vue3+ts+antdv+vite+...

  • webpack教程

    本文将介绍从零开始搭建vue的打包环境,重点介绍webpack,vue的知识点请恕本文无耻的省略了OK,开始! 什...

  • 从零开始搭建一个vue项目 -- vue-cli/cooking

    从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟...

  • Vue基础环境搭建

    1. 下载安装node.js vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网...

  • 前端环境搭建

    前端开发环境的搭建 vue环境搭建(node,vue-cli,vue) https://www.jianshu.c...

  • 从零开始搭建一个简单的基于webpack的vue开发环境

    从零开始搭建一个简单的基于webpack的vue开发环境 注:基于webpack3.X的版本,webpack4.X...

  • 手动配置一个vue项目小案例

    前言 之前使用vue-cli能成功搭建vue项目环境, 对立面的内容理解的不是很清楚,现在手动搭建一个基础项目 使...

  • vue+ionic

    vue的环境搭建: npm install -g @vue/cli (若已搭建跳过)vue create i...

网友评论

    本文标题:从零开始为vue搭建基础环境

    本文链接:https://www.haomeiwen.com/subject/omwwzqtx.html