vue入门:使用vue-cli新建vue项目

2020-08-18  本文已影响0人  ClownD

一、安装node环境

  1、下载地址为:https://nodejs.org/en/

2、检查是否安装成功:输入 node -v 和 npm -v()

node安装后将会自动安装上npm,但不一定是最新的,可用命令 npm install -g npm,进行最新版本安装

3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

cnpm -v

二、搭建vue项目环境

  1、全局安装vue-cli

npm install --global vue-cli

全局安装vue-cli

2、运行以下命令来创建一个新项目:

vue create hello-world

vue create 命令有一些可选项,你可以通过运行以下命令进行探索:

选项:

  -p, --preset <presetName>      忽略提示符并使用已保存的或远程的预设选项

  -d, --default                  忽略提示符并使用默认预设选项

  -i, --inlinePreset <json>      忽略提示符并使用内联的 JSON 字符串预设选项

  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端

  -r, --registry <url>            在安装依赖时使用指定的 npm registry

  -g, --git [message]            强制 / 跳过 git 初始化,并可选的指定初始化提交信息

  -n, --no-git                    跳过 git 初始化

  -f, --force                    覆写目标目录可能存在的配置

  -c, --clone                    使用 git clone 获取远程预设选项

  -x, --proxy                    使用指定的代理创建项目

  -b, --bare                      创建项目时省略默认组件中的新手指导信息

  -h, --help                      输出使用帮助信息

你也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

3、cd 打开项目目录,运行npm run server命令启动项目

4、 新建vue项目(webpack

在命令行中,进入指定路径,运行 vue init webpack 项目名称,例如: vue init webpack my-vue。

使用webpack创建vue项目

按照提示信息,进行创建项目,一般默认直接选择yes就

   等待创建完成,过程需要几分钟。

三、启动运行

1、进入项目根目录,运行命令npm run dev,如下:

将看到项目进行启动。启动成功后,将看到运行地址。

2、在浏览器中输入以上地址,将输出结果,如下图:

    注意:Vue.js 不支持 IE8 及其以下 IE 版本,最好使用Chrome。

如此简单,开启第一步!三个重要命令:

使用webpack

npm install --global vue-cli

vue init webpack 项目名称

npm run dev

使用vue-cli

npm install --global vue-cli

vue create 项目名称

cd 项目名称

npm run server

上一篇 下一篇

猜你喜欢

热点阅读