vue-cli 2.x 和 @vue/cli 3.x

标签:

本文出自jvm123.com-java技术分享站:http://jvm123.com/2019/08/vue-cli-1-he-vue.html

安装nodejs

使用vue前,需要先下载安装nodejs,在官网下载后直接双击安装即可。

安装完毕,可以在命令行 输入 npm 进行验证。

npm 是 nodejs 附带的一个软件包管理工具,可以用它来安装项目所需的依赖。例如:安装vue-cli、vuex等。

// 例如:
npm i element-ui -S

安装vue-cli

vue-cli 是一个快速生成 vue 项目目录结构的工具,可通过以下命令安装:

npm install -g vue-cli    // 加-g是安装到全局 

如果需要指定软件的版本,可用以下命令:

npm i -g @vue/cli@3.0.0-beta.6

vue-cli 2.x 和 @vue/cli 3.x 使用的方式不同 ,下面分别介绍:

vue-cli

1 使用webpack创建项目

vue init webpack my-project

根据提示,选择或填写项目基本的信息,最后会生成项目的目录 my-project。

vue-cli 2.x 和 @vue/cli 3.x插图
vue-cli 1.x 创建项目

2 进入这个目录,执行以下命令安装 package.json 中指定的依赖

npm install

如果还需要额外的依赖,则可通过以下命令安装:

npm install -s vuex  // 安装 vuex

3 运行项目使用以下命令

npm run dev

4 构建打包项目

npm run build

打包后,会生成 dist 文件夹,文件夹会有 index.html 文件,将此文件夹中的内容放在 nginx 的 html 目录下,则可以通过 nginx 访问,即网站应用已经发布完成。

@vue/cli 3

如果安装 vue cli 的版本是3.0 以上的,则可通过以下步骤开发

1 创建项目

vue create my-project

2 进入这个目录,执行以下命令安装 package.json 中指定的依赖

npm install

如果还需要额外的依赖,则可通过以下命令安装:

npm install -s vuex  // 安装 vuex

3 运行项目使用以下命令

npm run serve

4 构建打包项目

npm run build

打包后,会生成 dist 文件夹,文件夹会有 index.html 文件,将此文件夹中的内容放在 nginx 的 html 目录下,则可以通过 nginx 访问,即网站应用已经发布完成。

《vue-cli 2.x 和 @vue/cli 3.x》有1个笔记:

发表评论