zoukankan      html  css  js  c++  java
  • 01 VSCode 搭建VUE环境

    注意:使用npm安装文件时,速度比较满,尽量使用cnpm。

    1、安装Vscode。

    2、安装nodejs,nodejs 就类似于 CLR,是vue运行的基础环境。

          2.1 安装到本地(记住安装目录),下载地址:( https://nodejs.org/zh-cn/

               

        2.2 配置环境变量

                

       2.3 测试安装结果,在cmd中 输入  node -i  ,显示结果如下,表示安装成功。

               

            

    3、打开vscode,打开“终端——>新建终端”,在终端对话框中执行如下命令

          3.1 全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目。

              cnpm install -g vue-cli

               回车,等待安装完成

         

         3.2 安装webpack,它是打包js的工具

        cnpm install -g webpack 

              回车,等待安装完成

         3.3 安装完成之后就可以开始创建vue项目,首先创建一个文件夹用来存放你的项目,

               用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是vuedemo

                创建项目命令,输入回车:

                 vue init webpack vue_demo           

               之后会提示你输入如下信息,参考下面输入即可  

                  (注意:Project name:vue_demo,不能有驼峰,不能大小写混用,最好都是小写,否则会报错

             3.4 然后继续等待安装依赖项。完成之后,一个基本的 vue项目就搭建完了。完成之后的vscode左边可以看到如下目录,其中main.js就是入口。

             3.5 执行完毕后,检查项目文件夹中是否包含node_modules文件夹,

                    

                    若缺失,表示 npm没有安装成功,此时,在“终端”中,cd 到项目根目录,然后执行

                     cnpm install

                   

               安装成功后,就会自动出现 node_modules文件夹,运行效果如下:

                       

               3.6 确认

                          运行 http://localhost:8080,运行效果如下,即表示运行VUE环境搭建成功。

             

     4 、部署

           项目打包发布上线

               npm run build

         完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。

  • 相关阅读:
    python装饰器的wraps作用
    lambda函数和map函数
    python直接赋值、切片、浅拷贝和深拷贝
    ubuntu shell脚本出错 dash
    关于方法论和相关书籍
    如何安全的大数据量表在线进行DML操作
    mysql group by 查询非聚集列
    MongoTemplate进行增删改查
    Mockito 的用法
    一个人开始优秀的3种迹象
  • 原文地址:https://www.cnblogs.com/qiupiaohujie/p/12325205.html
Copyright © 2011-2022 走看看