vue环境安装+基本设置的详细教程

Vedu • 2020-10-17 07:35 • 技术资讯 • 阅读 2786

第一步、安装node.js环境

下载地址: http://nodejs.cn/

这里可以看到它有两个版本我们选择使用LTS版本，也就是长期支持版本比较稳定

第二步、更改npm包管理时的global以及缓存的位置

安装好之后，对npm安装的全局模块所在路径以及缓存所在路径，进行配置。

是因为以后执行类似：npm install express [-g]（后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

例如：小编希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，这里小编的安装文件夹是这个【D:\nodejs】你们自己的依据自己的真实路径来，在【D:\nodejs】下

创建两个文件夹【node_global】及【node_cache】

创建好了之后在CMD中运行以下命令:(更改npm安装路径)

//先运行这个
npm config set prefix "D:\nodejs\node_global"

//再运行
npm config set cache "D:\nodejs\node_cache"

第三步、我们在下载一个cnpm

以上命令执行完毕后接下来我们下载cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，

如果npm的服务器在中国就好了，所以我们的淘宝团队干了这事！

来自官网：“这是一个完整的npmjs.org镜像，你可以用此代替官方版本（只读），同步频率目前为10分钟一次以保证尽量与官方服务同步。”

安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后输入 cnpm-v，可以查看当前cnpm的版本

好了，到了这里node就暂时告一段落了。接下来安装vue-cli

先确认是否安装过，如果有可以通过：

npm uninstall vue-cli -g  //进行卸载

上面我们安装了cnpm所以我们安装vue-cli当然使用cnpm了

cnpm install -g @vue/cli    // 进行脚手架的安装

或者有些有条件的小伙伴可以从国外的服务器来安装

直接通过国外的npm安装

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

安装好了之后可以通过指令：vue -V 查看脚手架是否安装成功(注意-v大写)

vue -V

第四步:通过脚手架创建项目

vue create //项目名称

第五步、运行项目：

输入

npm run serve //运行，通过浏览器访问local地址。

第六步、编译项目：

切换到项目文件夹下运行以下命令

cnpm run build

好了，到了环境的安装配置以及运行项目就完了，小伙伴们有什么疑问欢迎在下方评论区提问哦

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/tech/12592.html

vue环境安装+基本设置的详细教程

第一步、安装node.js环境

第二步、更改npm包管理时的global以及缓存的位置

第三步、我们在下载一个cnpm

相关推荐

发表评论