从Node.js安装到创建一个vue项目
浏览 531 | 评论 1
黄文勇
2019年10月24日

一、Node.js and vue-cli安装与配置

1.安装node.js

在这里我安装的是最新的Node.js --12.10.0

安装包 node.js安装包 提取码:fskp

直接双击运行即可,安装完毕之后需要配置npm的全局变量

右键我的电脑->属性->高级系统设置->环境变量->新建 变量名:NODE_PATH;变量值:x:xxxxnode_modulesnpmnode_modules->一直点击确定即可

2.搭建vue的脚手架工具

键盘按住win+R->输入cmd->回车->输入:npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像(下载速度会快点,不想安装也可以不安装)->回车(等待安装成功)

键盘按住win+R->输入cmd->回车->输入:npm install --global vue-cli (or cnpm install --global vue-cli) ->回车(等待安装成功)

3.创建vue项目(必须有一个项目文件夹并在dos窗口cd进这个文件夹)

创建vue项目有两种创建方式:

3.1使用webpack创建

键盘按住win+R->输入cmd->回车->cd进项目文件夹->输入:vue init webpack vue-demo->回车(vue-demo为项目名)

项目配置如图:

vue-cli配置图

创建完成之后->输入:cd vue-demo->回车

(如果项目无依赖,即项目文件夹中无 node_modules这个依赖文件夹,需要运行npm install / cnpm install)

npm run dev 启动项目。

3.2使用 webpack-simple 创建项目

键盘按住win+R->输入cmd->回车->cd进项目文件夹->输入:vue init webpack-simple vue-demo2 ->回车(vue-demo2为项目名)

->cd vue-demo2

->npm install / cnpm install(必须运行,因为项目无依赖)

npm run dev 启动项目。

二、vue-cli3安装与配置

如果有安装过 vue-cli2或更早版本的需要卸载 vue-cli;vue-cli3需要node.js版本8.6以上才支持

卸载vue-cli :npm uninstall vue-cli -g / yarn global remove vue-cli

安装vue-cli3: npm install -g @vue/cli 或 yarn global add @vue/cli

安装vue-cli3有可能出现code:EPERM;errno:-4048 的错误,这个时候可以在dos中输入指令:npm cache clean --force

再次安装就没问题了

检查cli版本是否正确(3.x)

vue --version

创建项目:(必须有一个项目文件夹并在dos窗口cd进这个文件夹)

创建项目指令:vue create hello-word->回车->选择默认->回车

运行项目指令: npm run serve

编译项目:npm run build

本文作者:黄文勇
本文链接:https://www.3dcw.cn/index.php/archives/359/
最后修改时间:2020-05-29 17:45:31
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
评论
与本文无关评论请发留言板。请不要水评论,谢谢。
textsms
支持 Markdown 语法
email
link
评论列表
已有 1 条评论
จุ๊บXavier
2019-10-15 09:13
Mark 一下