deepin15.10.1桌面版配置Vue环境

最近想体验下linux开发环境，最后选择了国内的deepin系统。

记录一下Vue环境的搭建。

首先从node官网下载压缩包 官网地址：https://nodejs.org/zh-cn/

 

• 下载后解压
• 然后创建链接执行

sudo ln -s /home/feng/java/node-v10.16.0-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /home/feng/java/node-v10.16.0-linux-x64/bin/npm /usr/local/bin/npm

注意/home/feng/java/node-v10.16.0-linux-x64为解压缩后的文件地址

• 查看版本信息

node -v
npm -v

• 通过淘宝镜像安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 然后创建链接执行

sudo ln -s /home/feng/java/node-v10.16.0-linux-x64/bin/cnpm /usr/local/bin/cnpm

• 查看版本信息

cnpm -v

• 安装vue

cnpm install vue

• 全局安装 vue-cli

cnpm install --global vue-cli

• 创建链接
  
  

sudo ln -s /home/feng/java/node-v10.16.0-linux-x64/bin/vue /usr/local/bin/vue

• 输入 vue 出现相关信息 

​​​​

• 创建一个基于 webpack 模板的新项目,时间较长耐心等待。。。。。 

vue init webpack my-project

需要注意的是项目的名称不能大写，不然会报错。

Project name (my-project) # 项目名称（我的项目）

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者 

Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）

当然这些都看你自己个人的情况，我这里是全选了yes

• 如果提示没有找到package.json，运行下面命令创建

cnpm init -f

 

• 进入到项目:

cd my-project

• 所以在这之前需要解决项目的依赖问题，使用下面的命令安装项目的依赖:

cnpm install

• 运行项目:

cnpm run dev

• 在浏览器中输入 localhost:8080  出现如下界面说明项目启动成功

大功告成