• Vue笔记 创建项目


    1》下载Nodejs

      nodejs中文网(http://nodejs.cn/download/)和原网(https://nodejs.org/en/download/ )站上都可以下,但从速度上来说

           https://npm.taobao.org/mirrors/node/v14.7.0/

      淘宝的镜像更快些,可以改变路径版本来选择,比如我想要12.18.3的版本,那就直接

           https://npm.taobao.org/mirrors/node/v12.18.3/

    2》安装Nodejs

      双击运行,一路Next,除了选择安装路径,建议直接D盘或者E盘。

       注意这里默认4个选项,会在系统环境变量中生成路径。

      在CMD指令行运行这样,标识OK

     3》配置全局

      npm默认全局会在【C:Users用户名AppDataRoaming pm】,现在来改变

      在安装目录下,建立目录

       然后在CMD中

      

    npm config set prefix "D:
    odejs
    ode_global"
    npm config set cache "D:
    odejs
    ode_cache"
    

      配置后,利用npm root -g来查看全局目录。

     4》环境变量

      增加系统环境变量:NODE_PATH

        修改用户环境变量,将此路径改到d: odejs ode_global下

       

    5》安装Vue脚手架(全局)

      npm install -g vue-cli

      安装完成后,可以查看能创建哪些项目结构

    6》创建新项目

      切换到指定目录:

      执行:vue init webpack my-demo

          其中:webpack表示是完整的webpack类型项目;my-demo表示所属目录,如果不填就是当前目录。

      输入指令后一路回车就行。

       如果出现以下Runtime-only提示也是回车

       目录结构说明:

    项目目录:
    build----项目构建(webpack)相关代码
    config-----配置目录,包括端口号,测试环境,生产环境编译参数等。我们初学可以使用默认的。
    node_modules --- 加载的项目依赖模块
    src----这里是我们要开发的目录,基本上要做的事情都在这个目录里。以下目录和文件有的是自带的,有的是新建的,方便开发就行。
      ---assets: 放置一些图片,如logo等。  
      ---
    App.vue:Vue主组件,我们也可以直接将组件写这里,而不使用 components 目录。
      ---main.js:项目入口文件

    ---components: 可以放第三方子组件文件,
    ---router:路由模块
    ---store:Vuex的存储模块
    ---views:自己定义子组件文件
      ---api:请求模块
      ---config:静态资源,比如下拉框的固定信息等
      ---utiles:工具文件
    static----静态资源目录,如图片、字体等。打包时候这个目录下的文件一定会打包进去
    dist---打包生成的最终文件,需要在config里面配置的。 test
    ----初始测试目录,可删除.xxxx----文件这些是一些配置文件,包括语法配置,git配置等。index.html----首页入口文件,你可以添加一些 meta 信息或统计代码啥的。package.json----项目配置文件。 README.md----项目的说明文档,markdown 格式
    package.json---项目依赖情况
    package-lock.json---在使用npm install会生成,表示当前项目中依赖包版本情况
    index.html---调试时候的引导页面

    6》如果是老项目

      执行前,一定要清除npm的缓存,再安装

      先清除缓存:npm cache clean --force

        在安装依赖:npm install

  • 相关阅读:
    Paragon NTFS for Mac免费获取官方赠送正版.更新获取ntfs for mac 14方法
    Python修饰器的函数式编程
    Python装饰器与面向切面编程
    linux配置IP的方法
    Centos搭建SVN服务器三步曲
    [CentOS 6.5 X64]讓firefox java plugin 啟動
    逻辑分析题(三)
    逻辑分析题汇总(一)
    第十章—DOM(0)—NODE类型
    第十章—DOM(三)——Text类型
  • 原文地址:https://www.cnblogs.com/huhu1020387597/p/13457721.html
Copyright © 2020-2023  润新知