jeecms v9 vue环境搭建

 

 

一、安装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

转载于:https://www.cnblogs.com/Jeely/p/11224128.html