一、安装NODEJS运行环境

前往nodejs官网下载nodejs,https://nodejs.org/en/ ,建议下载最新稳定版的,下载后安装即可,下载选择类似如下

安装完毕之后,在cmd中输入node -v查看是否已经安装成功

如果有版本号显示,则代表安装成功!!!

接下来我们尝试输入npm -v

nodejs自带npm,所以我们不需要额外安装就可以了。

二、环境变量设置
接下来我们需要配置npm的全局模块的存放路径以及cache的路径,例如我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立“node_global”及“node_cache”两个文件夹。我们就在cmd中键入两行命令:

npm config
set prefix "D:\Program Files\nodejs\node_global"

npm config
set cache "D:\Program Files\nodejs\node_cache"

下面这一步非常关键,我们需要设置系统变量。进入我的电脑→属性→高级→环境变量。在系统变量下新建“NODE_PATH”,输入“D:\Program
Files\nodejs\node_global\node_modules”

二、安装cnpm

cmd 后敲入下面命令

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

需要详细了解cnpm的朋友请前往官网https://npm.taobao.org/

之后输入cnpm -v

接下来我们就可以用cnpm代替npm了

若是提示没有版本,则需要将cnpm命令所在文件夹加入环境变量的path中

例如我本地的是在

D:\Program Files\nodejs\node_global下,则将此路径追加到path中

三、安装安装vue

cnpm install -g @vue/cli

vue  -V

四、接下来是创建项目框架

进入源码目录:

C:\Users\Administrator>f:

F:\>cd F:\jeecms\jeecmsv9AuthorizedVersion\jeecmsv9Vue\jeecmsVue

F:\jeecms\jeecmsv9AuthorizedVersion\jeecmsv9Vue\jeecmsVue>cnpm
install

如果想放到指定的目录下,先进入这个目录再执行创建项目的命令

E:\test\vue init webpack myProjectName
         //创建一个基于"webpack"的项目,后面是项目名

依次按照提示输入,项目名、项目描述、项目作者等等,

然后一路回车  看到最后这个项目就创建好了。

五、运行测试

cnpm run dev

cnpm run build

一般流览器会自动跳转出界面http://localhost:8080/,也可以手动打开流览器器输
入地址。

npm run build 打包

4.4 后台页面发布 
后台源码的开发文件不可直接运行在浏览器中,需要通过命令打包将源码生成为静态文件 
1.使用命令行工具进入 工程目录 
  
2. 项目工程中如果没有node_modules文件夹,则执行 
npm install (推荐使用cnpm  install,http://npm.taobao.org/  加快依赖下载速度) 
  如果有则忽略此步骤 
3.执行命令npm run build

出现building for production 则成功执行,等待命令完成 完成后会出现下图 
  
出现上图,说明打包编译完成,在项目中会有一个dist文件夹 
  
dist文件夹中有两个文件 
  
4、将index.html改名为index.do 后,将index.do和static文件夹放到ROOT下的/jeeadmin/jeecms文件夹下,eclipse下放到/WebContent/jeeadmin/jeecms下 jeecms

jeecms v9 vue环境搭建的更多相关文章

  1. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  2. 55.Vue环境搭建

    Vue环境搭建 在搭建过程中出现的错误解决办法  https://www.cnblogs.com/lovebing/p/9488198.html      cross-env使用笔记   cross- ...

  3. Vue环境搭建及第一个helloWorld

    Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置  https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...

  4. 前端(二十三)—— Vue环境搭建

    目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...

  5. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

  6. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  7. vue 环境搭建笔记

    环境 开发工具:VS Code vue版本: 2.x 准备 使用 npm 包管理器进行安装,也可以使用 yarn 包管理器. 可以使用淘宝的 npm 镜像,国内速度更快. 使用方式: $ npm in ...

  8. windows vue环境搭建

    windows环境搭建Vue开发环境 一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:). 二.设置nodejs pr ...

  9. Vue环境搭建和项目创建

    目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...

随机推荐

  1. USACO2006 Backward Digit Sums /// 全排列 oj24212

    题目大意: 给出杨辉三角的顶点值M和底边数的个数 N (1 ≤ N ≤ 10) ,求出底边各个数的值,其中各个数范围都为1 ~ N 当N=4,M=16时可能是这样的   3   1   2   4  ...

  2. mysql tar安装模式

    mysql解压版安装过程,之前安装mysql一直用linux yum和rpm方式.今天试了下tar包方式有点麻烦记录下1.安装lrzsz-0.12.20-27.1.el6.x86_64.rpm方便操作 ...

  3. 人脸识别-常用的数据库Face Databases From Other Research Groups

    Static/Videos Static Single/Multiple faces Single? Gray/Color Color Resolution Vaious Face pose Fron ...

  4. opencv3.1.0 在控制台程序中报错:winnt.h(6464): error C2872: ACCESS_MASK: 不明确的

    在winnt.h里面有一个cv的命名空间,同样定义了一个ACCESS_MASK,跟opencv的cv::ACCESS_MASK发生了冲突!!! 该冲突在MFC中没有出现,在控制台程序中才会报错!对于o ...

  5. MySQL安装pdf介绍

    pdf地址:https://files.cnblogs.com/files/pygo/mysql%E5%AE%89%E8%A3%85.pdf

  6. 十一. for of

    const fruits = ['Apple','Banana','Orange','Mango']; es5: 可读性差 for(let i=0; i < fruits.length; i + ...

  7. SQL Server ODBC 解决方案

    { } { }

  8. thinkphp 模板布局

    ThinkPHP的模板引擎内置了布局模板功能支持,可以方便的实现模板布局以及布局嵌套功能. 有三种布局模板的支持方式: 第一种方式:全局配置方式 这种方式仅需在项目配置文件中添加相关的布局模板配置,就 ...

  9. thinkphp 前置和后置操作

    前置和后置操作指的是在执行某个操作方法之前和之后会自动调用的方法,不过仅对访问控制器有效. 其他的分层控制器层和内部调用控制器的情况下前置和后置操作是无效的. 系统会检测当前操作是否具有前置和后置操作 ...

  10. Objective-C 中的 Meta-class 是什么?

    在这篇文章中,我关注的是 Objective-C 中的一个陌生的概念-- meta-class.在 Objective-C 中的每个类都有一个相关联的 meta-class,但是你很少会直接使用 me ...