Vue入门——配置vue环境

在安装上node,npm,cnpm后,想学学vue了,感觉他的数据绑定好像很好玩的样子呀(其实,小白觉得是很难得样子😭,小白是在mac上操作的哈)。
一、检查node,npm,cnpm是否安装成功
在这里插入图片描述
二、安装webpack(全局安装)

npm install webpack -g 

如果安装卡住了,或者安装不上,可以尝试:cnpm install webpack -g
三、安装脚手架

npm install vue-cli -g 

提示一下错误:代理设置有问题

npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/hexo-deployer-git failed, reason: connect ETIMEDOUT 211.136.113.1:8080
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network ‘proxy’ config is set properly. See: ‘npm help config’

解决方法:
1、先查看一下npm的代理

npm config get proxy
npm config get https-proxy

如果两个返回的结果都是null,那就继续操作3;如果不是null,那就适用操作2
2、设置npm代理为null

npm config set proxy null
npm config set https-proxy null

3、设置新的代理

npm config set registry http://registry.cnpmjs.org/

四、创建vue项目
1、首先,cd到工程目录下面
操作步骤为,在本地创建一个空文件夹,用来存放Vue项目,比如test这个文件夹,例如:

cd /Users/jiating/Documents/workspace/vue/

2、然后,创建Vue工程

vue init webpack test

然后出现一下信息,按着自己的需要填写吧

project name // 顾名思义,就是项目的名字
project description //项目的描述
author // 作者
Vue build //打包方式,默认回车即可
nstall vue-router // 是否安装router,router是路由功能,选择 y
Use ESLint to lint your code // 代码风格检查器,选择y
Set up unit tests // 单元测试,这个就不需要了,选择n
Setup e2e tests with Nightwatch // e2e测试,选择n

填完以后回车,他就会进行设置,然后出现下图的信息
在这里插入图片描述
然后

cd /Users/jiating/Documents/workspace/vue/test

这时候,可以看到vue-cli脚手架工具已经帮我们构建了一个项目的结构啦。
在这里插入图片描述
启动项目:

npm run dev

在这里插入图片描述
在这里插入图片描述
五、在webStorm中打开项目
在这里插入图片描述
好,运行成功啦😜

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读