欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue、J2ee -> 001 : Vue项目的创建过程

程序员文章站 2022-07-05 08:19:52
使用命令行的方式,通过vue-cli的脚手架进行模板下载打包: 1、安装node.js环境,查看node版本并确认是否安装成功【node -v】2、安装WebStorm开发工具(使用WebStorm来开发Vue项目)3、在WebStorm中直接引入Vue.js文件就可以进行开发测试 a、和使用ecl ......

使用命令行的方式,通过vue-cli的脚手架进行模板下载打包:

1、安装node.js环境,查看node版本并确认是否安装成功【node -v】
2、安装webstorm开发工具(使用webstorm来开发vue项目)
3、在webstorm中直接引入vue.js文件就可以进行开发测试
  a、和使用eclipse进行开发无二差别
  b、但是可以在webstorm中可以时间查看开发情况,不用象eclips还需要启动tomcat服务器,webstorm内存类似tomcat的服务器
4、以上只是vue.js的简单使用,还不属于vue项目。

5、创建vue项目(通过脚手架下载模板项目,在模板项目基础之上进行开发)
  a、需要node环境,上面已经安装
  b、需要vue-cli脚手架,用于打包、测试、部署...vue项目
    安装命令【npm install -g vue-cli】,查看版本号及是否安装成功【vue -v】
  c、vue模板的下载,有多个模板可供下载,常用模板【webpack】
    下载命令【vue init webpack 项目名称(不能有大写字母存在)】
    安装过程(参数都有默认值,也可以修改):
      01、项目名称提示
      02、描述
      03、作者
      04、是否使用vue-roter路由,如果不使用可以不安装
      05、是否需要eslint,一般都需要
      06、是否需要单元测试库,如果是基于功能测试可以不需要
      07、与06类似
      08、使用什么方式下载,也可以手动下载
      09、如果上面选择了手动下载会直接退出。

      10、如果选择手动下,会直接退出花前月下给出手动下载的步骤
        cd 项目名称
        npm install(or if using yarn: yarn)
        npm run lint -- -- fix (or for yarn: yarn rum lint -- fix)
        npm run dev

        上面的意思是需要进入到项目目录文件夹下进行操作
        使用npm install命令进行下载,这个比较耗时
        运行npm run lint -- -- fix
        进行打包、并且运行【npm run dev】,完成之后会给出访问地址,在浏览器中使用给出的地址进行访问

 

以下是部分图片

Vue、J2ee -> 001 : Vue项目的创建过程

Vue、J2ee -> 001 : Vue项目的创建过程

Vue、J2ee -> 001 : Vue项目的创建过程

Vue、J2ee -> 001 : Vue项目的创建过程

Vue、J2ee -> 001 : Vue项目的创建过程

Vue、J2ee -> 001 : Vue项目的创建过程