vue3 HelloWord项目搭建方法

vue 3需要node10以上版本

1.安装Node.js

Node.js下载地址
1.1:检查是否安装成功:node -v
1.2:配置Node.js淘宝镜像:

npm config set registry https://registry.npm.taobao.org

cnpm可选安装:
安装淘宝cnpm镜像:npm install -g cnpm –registry=https://registry.npm.taobao.org
检查cnpm是否安装成功:cnpm -v
以后用npm的方直接使用cnpm

2.安装vue/cli

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

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

检查是否安装成功:vue -v

备注:yarn是npm的替代品,安装yarn指令:

安装:npm install -g yarn
检查是否安装成功:yarn -v

3.创建项目

输入指令 vue create 项目名称

vue create myvue

vue3 HelloWord项目搭建方法_第1张图片

1.default(vue3 babel,eslint):默认设置(直接enter)非常适合快速创建一个新vue3项目的原型,没有带任何辅助功能的 npm包

2.default(vue2 babel,eslint):默认设置(直接enter)非常适合快速创建一个新vue2项目的原型,没有带任何辅助功能的 npm包

3.Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包

4.项目运行和发布

1.项目安装完成目录结构:
vue3 HelloWord项目搭建方法_第2张图片
2.进入到新建的项目目录:

cd myvue

开发模式运行:

yarn serve  或 yarn run serve

编译打包:

yarn build  或 yarn run build

3.yarn serve 执行后输出如下图,即运行成功,输入图中对应的网址即可访问:
vue3 HelloWord项目搭建方法_第3张图片
4.修改代码后浏览器会自动实时更新已修改的代码内容。

你可能感兴趣的:(vue.js,npm,javascript)