• vue--------脚手架vue-cli搭建


      今天在看公司的项目的时候,用到的是Vue框架,哈哈,Vue已经火好久了,想必大家也晓得哈,这里宝宝就不瞎渣渣了~

      由于宝宝已经三个月木有看过代码了,所以对新公司的很多的架构和代码都是懵逼的,再加上宝宝其实和小白差不多,哈哈,所以甚至想把很简单的问题都写进来~

           进入正题。

      Vue提供了一个脚手架vue-cli,能快速的帮我们搭建一个vue的项目,详细的讲解如下:

      准备工作:

      (1)node环境:

          node的安装基于Ruby环境,然后在安装node;如需要安装包,可以留言给我,或者上网查就可以;

      (2)安装vue-cli的全局:

         npm  i      vue-cli  -g

      创建脚手架:

        【介绍】vue的脚手架的构建在运用中有两种方式,分别为简单版和复杂版,两者的创建方式会在下面给小伙伴们讲解下,至于选用哪一种看个人的爱好了,个人推荐在写Demo的时候,选用前者,哈哈~

        (1)创建脚手架项目:

                    简单版: npm i webpack-simple [项目名]  

             复杂版: npm i webpack [项目名]  

          这里有一个细节性的问题,我在创建项目名的时候,发现不能采用驼峰命名法,所以我选用的命名都是小写的,不知道大家的可以吗,你们可以试一下~

          在创建脚手架的时候,会有一些配置,如:

        

    ? Project name my-project
    ? Project description A Vue.js project
    ? Author runoob <test@runoob.com>
    ? Vue build standalone
    ? Use ESLint to lint your code? No                 ------代表编码的规范(习惯性选择No)
    ? Pick an ESLint preset Standard
    ? Setup unit tests with Karma + Mocha? No          ------使用前端测试工具Mocha(自行选择)
    ? Setup e2e tests with Nightwatch? No              ------设置端到端的测试(自行选择)
    

      

             (2)初始化项目:

           进入项目文件夹:cd [项目文件]

           安装相对应的依赖: npm i  (或者是npm install)

        (3)运行项目:

            npm run dev

           然后在浏览器中就能看到打开的默认页面~

       【福利】

        每次写到福利这里的时候,我觉得自己开心的像个二百斤的胖子,今天的福利是git+vue-cli~ 

        讲到这,有的小伙伴就不理解了,git什么鬼...[这个东西先过滤掉~]

        在git中也可以运行以上vue-cli的一些命令,是不是很神奇,哈哈,当我第一次听到的时候也震惊了,有可能是宝宝真的太弱智了~

        附加:如果项目中的node_module整个文件夹,按照我的恶习就是del,直到遇到一个大神,才知道git的强大之处,在git窗口输入命令:

        rm -rf node_module (或者直接node然后按下Tab就ok了,自动的找对应文件下面的以node开始的文件。。。省略)  

        分享一个vue-cli目录介绍的链接 : http://www.runoob.com/vue2/vue-directory-structure.html,里面将每个目录的信息讲解的很详细;

       【over了~谢谢大家观赏~~~~~】

                Vue.js 不支持 IE8 及其以下 IE 版本。

  • 相关阅读:
    随机数、无重复、冒泡排序
    今天是星期几
    Button
    2012/8/5为应用指定多个配置文件
    2012/8/4解决JSP显示中文乱码
    2012/8/4 struts2学习笔记
    2012/8/4Action中result的各种转发类型
    2012/8/4为Action属性注入值
    2012/8/3SVN小入门
    2012/8/3 Extjs使用TabPanel时需要注意的问题
  • 原文地址:https://www.cnblogs.com/Mrs-pao/p/7881861.html
Copyright © 2020-2023  润新知