vue-cli脚手架搭建

一、环境的搭建:

  1. 安装node.js,安装完成后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。


  2. 安装淘宝镜像,打开命令行工具,把这个(npm install -g cnpm --registry= https://registry.npm.taobao.org)复制(这里要手动复制就是用鼠标右键那个,具体为啥不多解释),安装这里是因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候很很慢很慢超级慢,所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v,如下图,如果出现相应的版本号,则说明安装成功。

    补充:以上是我最开始接触vue的时候用的安装cnpm的方法,但后来不知道什么原因就失败了,后来的解决方案如下:
npm i -g cnpm
  1. 安装webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。


二、我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目:

1.先全局安装vue-cli

npm install -g vue-cli

安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。


  1. 初始化项目
vue init webpack vue-demo

然后一路回车。

  1. 运行vue环境
npm run dev
  • vue 脚手架有时会出问题,报错 Error: No parser and no file path given
    原因:下载依赖包有bug
    解决方法:删除node_modules下的_prettier@1.13.0,执行cnpm install --save-dev prettier@1.12.0
  • 使用vue-cli初始化项目时运行‘npm run dev’报错
    试一下 卸载npm uninstall webpack-dev-server,在安装这个npm i webpack-dev-server@2.9.7,我的可以正常启动了。

  • 这个电脑上已经安装过vue环境后,下次再做新的vue项目,直接从“初始化项目”这步开始就行了~

查看搭建脚手架文档
这是我刚开始接触vue看的学习文档,跟着步骤能做出简单的项目例子

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容