在Ubuntu下部署Vue开发环境（详细流程）

在Ubuntu下部署Vue环境(非常详细流程)

本文作者:魏泯

博客源地址：https://www.cnblogs.com/simple/

效率魔法师

我们的需求是使用vue进行前后端分离开发，本节目标是为了能够使用npm run dev将我们的前端项目运行起来
我们需要的是nodejs、npm、cnpm、webpack、vue

我的Ubuntu版本: elementoryOS 5 (基于Ubuntu18)

在Ubuntu下下载安装nodejs

更新包管理器apt与apt-get

sudo apt update
sudo apt-get update

使用apt包管理器进行下载

sudo apt-get install nodejs			# 下载nodejs
sudo apt-get install npm		#下载npm,它是nodejs的包管理器（nodejs package manager）

升级 npm

npm install npm -g
# npm install -g npm
# npm -g install npm

国内的npm不是很好用，使用cnpm代替npm的日常使用。

升级或安装 cnpm

npm install cnpm -g

你可以使用以下命令来查看所有全局安装的模块：

$ npm list -g

请先安装git,安装命令请参考下面
ubuntu系统

sudo apt-get install git

安装Vue

最新稳定版

$ cnpm install vue

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

全局安装 vue-cli

$ cnpm install --global vue-cli

使用 cnpm 安装 webpack：

cnpm install webpack -g

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

这里需要进行一些配置，默认回车即可

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project
$ cnpm install		# 安装依赖
$ cnpm run dev		# 运行项目


 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

如有问题，请留言。
如有不足，请指正。