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

时间:2022-10-18 13:17:40

使用命令行的方式,通过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项目的创建过程