vue脚手架学习和创建vue基础项目

一、1、vue脚手架的使用

         在cmd命令窗口中可以通过npm install -g @vue/cli 来创建vue脚手架，注意，有时需要使用管理员权限启动安装

         

 

 

      2、创建vue基础项目架构

            1> 基于交互式命令行的方式，vue create 项目名称 来创建vue基本项目架构

            2>基于图形化界面的方式

                vue ui

            3>基于2.x的旧模板，创建旧版vue项目

                npm install -g @vue/cli-init

                vue init webpack my-project

          在这里我们使用第一种方式创建vue基础项目架构

         ①在命令行中输入vue create vueest

                  

 

 

         ②选择默认功能还是手动安装功能，这里选择手动安装，通过↑↓键来选择，选择好了之后按回车

             

 

       ③选择需要安装的功能，按↑↓键来选择，选择好以后按空格键选中，最后选好了按回车

              

 

       ④提示你选择安装历史模式还是Hash模式的，这里选择hash模式，选n,回车

            

 

       ⑤选择eslink的语法规则，选择标准模式，回车

           

 

        ⑥选择什么时候进行eslink语法校验，这里选择默认方式，第一个，回车

            

 

        ⑦这些文件Babel, ESLint, etc.如何配置，是单独存放到config中还是配置到Package.json中，这里选择单独存放到config中

             

 

        ⑧提示以上所做的配置是否保存为模板，供后续创建项目时使用，这里选择n,回车

              

 

         ⑨如果电脑安装了npm和yarn两个包管理器，随便选择一个，然后开始安装

             

            这样就创建完毕了

              

 

  二、配置项目启动端口

        1、在package.json中进行配置，也可以新建一个vue.config.js文件进行配置

          

 

     

 

    配置之后，通过

            npm run serve 启动项目，会自动打开项目并使用配置的端口进行展示